如果您想知道如何制作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": [
""
],
"js": ["content.js"]
}
]
这告诉Chromecontent.js使用特殊的"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": [
""
],
"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": [
""
],
"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