前端小白也能开发 Chrome 插件

2023-12-15 01:41:20

以前经常出现这样的情况，在阅读一些文章的时候，作者经常会提到一些项目或相关资料，但是，有时候只是一些简单的文本，并没有对应的链接，若我想了解更多项目详情，就需要自己用 Google 搜索或者通过其他方式来查找。我经常做的一件事就是，将这些文本内容复制粘贴到搜索引擎中，这样既浪费时间，又影响阅读的连贯性。

为了解决这个问题，我决定开发一个 Chrome 插件，当我遇到这些文本时，只需将它们选中，然后点击插件图标，插件就会自动帮我打开相应的链接。在文章的前言部分简单介绍了开发这个插件的动机，并给出了实现思路，即利用人工智能助手 GPT 来开发。

在接下来的文章中，我将详细介绍如何使用 GPT 开发 Chrome 插件，包括所需的工具、步骤以及一些示例代码。

所需的工具

谷歌浏览器
GPT-3 API 密钥
文本编辑器（如 Visual Studio Code）
Chrome 开发者工具

步骤

创建一个新的 Chrome 扩展程序项目。
在 manifest.json 文件中添加以下代码：

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This extension uses GPT-3 to open links to projects and resources mentioned in text.",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  }
}

在 content.js 文件中添加以下代码：

function getSelectedText() {
  return window.getSelection().toString();
}

function openLink(text) {
  var query = encodeURIComponent(text);
  var url = "https://websearch.api.ai/v1/webSearch?q=" + query;

  fetch(url, {
    headers: {
      "Authorization": "Bearer " + GPT_API_KEY
    }
  })
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    var link = data.webEntities[0].url;
    window.open(link, "_blank");
  });
}

document.addEventListener("mouseup", function(event) {
  var text = getSelectedText();
  if (text) {
    openLink(text);
  }
});

在 background.js 文件中添加以下代码：

chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
    id: "open-link",
    title: "Open Link with GPT",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  var text = info.selectionText;
  if (text) {
    openLink(text);
  }
});

function openLink(text) {
  var query = encodeURIComponent(text);
  var url = "https://websearch.api.ai/v1/webSearch?q=" + query;

  fetch(url, {
    headers: {
      "Authorization": "Bearer " + GPT_API_KEY
    }
  })
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    var link = data.webEntities[0].url;
    chrome.tabs.create({url: link});
  });
}

将扩展程序打包并安装到 Chrome 浏览器中。

示例代码

// content.js
function getSelectedText() {
  return window.getSelection().toString();
}

function openLink(text) {
  var query = encodeURIComponent(text);
  var url = "https://websearch.api.ai/v1/webSearch?q=" + query;

  fetch(url, {
    headers: {
      "Authorization": "Bearer " + GPT_API_KEY
    }
  })
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    var link = data.webEntities[0].url;
    window.open(link, "_blank");
  });
}

document.addEventListener("mouseup", function(event) {
  var text = getSelectedText();
  if (text) {
    openLink(text);
  }
});

// background.js
chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
    id: "open-link",
    title: "Open Link with GPT",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  var text = info.selectionText;
  if (text) {
    openLink(text);
  }
});

function openLink(text) {
  var query = encodeURIComponent(text);
  var url = "https://websearch.api.ai/v1/webSearch?q=" + query;

  fetch(url, {
    headers: {
      "Authorization": "Bearer " + GPT_API_KEY
    }
  })
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    var link = data.webEntities[0].url;
    chrome.tabs.create({url: link});
  });
}