十分钟入门：Chrome 插件开发

作者: 魂斗驴 | 来源:发表于2021-03-14 09:30 被阅读0次

如果您想知道如何制作Chrome插件，Chrome的插件文档非常适合基本实现。但是，要使用更高级的功能，需要进行大量的Google搜索。让我们制作一个与页面交互的中间Chrome插件：它将找到页面上的第一个外部链接，并在新tab页中打开它。

manifest.json

该manifest.json的文件讲述您的插件的Chrome重要信息，如它的名字和它的权限需要。

最基本的插件名是带有manifest.json文件的目录。让我们创建一个目录，并将以下JSON放入manifest.json：

{
  "manifest_version": 2,
  "name": "My Cool Extension",
  "version": "0.1"
}

这是最基本的方法manifest.json，所有必填字段都必须填写。manifest_version 应该始终为2，因为从2014年1月起，不支持版本1。到目前为止，我们的插件完全不执行任何操作，但还是将其加载至Chrome。

将插件加载到Chrome中

要将插件加载到Chrome中，请在浏览器中打开chrome://extensions/并单击右上角的“开发人员模式”。现在单击“加载解压的插件…”，然后选择插件的目录。现在，您应该在列表中看到插件名。

当您在插件中更改或添加代码时，只需返回此页面并重新加载页面即可。Chrome会重新加载您的插件。

content.js

插件文件夹内容

一个content.js是一个JavaScript文件，该文件运行在网页中的内容。 这意味着content.js可以与浏览器访问的网页进行交互。并非Chrome插件中的每个JavaScript文件都可以执行此操作；我们待会儿再见。

让我们添加一个名为的content.js

// content.js
alert("Hello from your Chrome extension!")

要注入脚本，我们需要将其告知manifest.json文件。

将此添加到您的manifest.json文件：

"content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": ["content.js"]
  }
]

这告诉Chromecontent.js使用特殊的<all_urls>URL模式将其注入我们访问的每个页面。如果我们只想在部分页面上插入脚本，则可以使用匹配模式。以下是一些值示例 "matches"：

["https://mail.google.com/*", "http://mail.google.com/*"]将我们的脚本注入HTTPS和HTTP Gmail。如果我们/以结尾而不是结尾/*，则它与URL完全匹配，因此只会注入 https://mail.google.com/，而不是https://mail.google.com/mail/u/0/#inbox。通常那不是您想要的。
http://*/*将匹配任何httpURL，但没有其他方案。例如，这不会将您的脚本注入https网站。

重新加载您的Chrome插件。您访问的每个页面现在都会弹出一个警报。让我们在页面上记录第一个URL。

打印URL

jQuery不是必需的，但它使一切变得更容易。首先，从jQuery CDN下载jQuery版本并将其放在插件的文件夹中。我下载了最新的缩小版本jquery-2.1.3.min.js。要加载它，请将其添加到manifest.jsonbefore "content.js"。您的整体manifest.json应如下所示：

{
  "manifest_version": 2,
  "name": "My Cool Extension",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["jquery-2.1.3.min.js", "content.js"]
    }
  ]
}

现在有了jQuery，让我们用它来打印页面中第一个外部链接的URL content.js：

// content.js
var firstHref = $("a[href^='http']").eq(0).attr("href");

console.log(firstHref);

请注意，我们不需要使用jQuery来检查文档是否已加载。默认情况下，Chrome在DOM完成后注入content.js。

尝试一下-您应该在访问的每个页面上的控制台中看到输出。

浏览器action

当插件在地址栏旁边添加一个小图标时，这是浏览器action。您的插件可以监听该按钮的点击，然后执行某些操作。

将Google插件教程中的icon.png放在插件文件夹中，并将其添加到manifest.json：

"browser_action": {
  "default_icon": "icon.png"
}

为了使用浏览器操作，我们需要添加消息传递。

讯息传递

插件流程图

content.js可以访问当前页面，但是可能访问的API受到限制。例如，它无法侦听浏览器操作的点击。我们需要在插件中添加另一种类型的脚本，即background.js，该脚本可以访问每个Chrome API，但无法访问当前页面。正如Google所说：

content.js有一些限制。他们不能使用chrome.*的API，与例外extension，i18n，runtime，和storage。

因此，content.js将能够从当前页面中拉出URL，但是需要将该URL移交给background.js才能对其进行一些有用的处理。为了进行交流，我们将使用Google所谓的消息传递，它允许脚本发送和收听消息。这是content.js和background.js进行交互的唯一方法。

添加以下内容以说明manifest.jsonbackground.js：

"background": {
  "scripts": ["background.js"]
}

现在，我们将添加background.js：

// background.js

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

这会将任意JSON有效payload 发送到当前tab。JSON payload 的密钥可以是任何东西，但为简单起见我选择了"message"。现在我们需要在中收听该消息content.js：

// content.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = $("a[href^='http']").eq(0).attr("href");

      console.log(firstHref);
    }
  }
);

请注意，我们之前的所有代码都已移到侦听器中，因此只有在收到payload 时才运行它。每次单击浏览器操作图标，您应该看到一个URL记录到控制台。如果不起作用，请尝试重新加载插件名，然后重新加载页面。

开启新tab

我们可以使用chrome.tabsAPI打开一个新tab：

chrome.tabs.create({"url": "http://google.com"});

但是chrome.tabs只能由所使用background.js，因此我们必须添加更多消息传递，因为background.js可以打开tab页，但无法获取URL。这是主意：

侦听单击中的浏览器操作background.js。单击后，将clicked_browser_action事件发送到content.js。
当content.js接收到该事件时，它将页面上的第一个链接的URL。然后将其发送open_new_tab回background.js以打开URL。
background.js侦听open_new_tab并在收到消息时使用给定的URL打开一个新选项卡。

点击浏览器操作将触发background.js，这将向发送一条消息content.js，这将向返回一个URL background.js，这将打开一个具有给定URL的新tab。

首先，我们需要告知content.js将URL发送到background.js。更改 content.js为使用以下代码：

// content.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = $("a[href^='http']").eq(0).attr("href");

      console.log(firstHref);

      // This line is new!
      chrome.runtime.sendMessage({"message": "open_new_tab", "url": firstHref});
    }
  }
);

现在我们需要添加一些代码来告诉background.js该事件：

// background.js

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

// This block is new!
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "open_new_tab" ) {
      chrome.tabs.create({"url": request.url});
    }
  }
);

现在，当您单击浏览器操作图标时，它将打开一个新选项卡，其中包含页面上的第一个外部URL。

打包

全部content.js和background.js以上。这是完整的manifest.json：

{
  "manifest_version": 2,
  "name": "My Cool Extension",
  "version": "0.1",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["jquery-2.1.3.min.js", "content.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png"
  }
}

这是完整的目录结构：

.
├── background.js
├── content.js
├── icon.png
├── jquery-2.1.3.min.js
└── manifest.json

参考

How to Make a Chrome Extension

网友评论

本文标题：十分钟入门：Chrome 插件开发

本文链接：https://www.haomeiwen.com/subject/oiymfltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！