如果您想知道如何制作Chrome插件，Chrome的插件文檔非常適合基本實現(xiàn)。但是，要使用更高級的功能，需要進(jìn)行大量的Google搜索。讓我們制作一個與頁面交互的中間Chrome插件：它將找到頁面上的第一個外部鏈接，并在新tab頁中打開它。

manifest.json

該manifest.json的文件講述您的插件的Chrome重要信息，如它的名字和它的權(quán)限需要。

最基本的插件名是帶有manifest.json文件的目錄。讓我們創(chuàng)建一個目錄，并將以下JSON放入manifest.json：

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

這是最基本的方法manifest.json，所有必填字段都必須填寫。manifest_version 應(yīng)該始終為2，因為從2014年1月起，不支持版本1。到目前為止，我們的插件完全不執(zhí)行任何操作，但還是將其加載至Chrome。

將插件加載到Chrome中

要將插件加載到Chrome中，請在瀏覽器中打開chrome://extensions/并單擊右上角的“開發(fā)人員模式”?，F(xiàn)在單擊“加載解壓的插件…”，然后選擇插件的目錄?，F(xiàn)在，您應(yīng)該在列表中看到插件名。

當(dāng)您在插件中更改或添加代碼時，只需返回此頁面并重新加載頁面即可。Chrome會重新加載您的插件。

content.js

插件文件夾內(nèi)容

一個content.js是一個JavaScript文件，該文件運(yùn)行在網(wǎng)頁中的內(nèi)容。 這意味著content.js可以與瀏覽器訪問的網(wǎng)頁進(jìn)行交互。并非Chrome插件中的每個JavaScript文件都可以執(zhí)行此操作；我們待會兒再見。

讓我們添加一個名為的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。如果我們/以結(jié)尾而不是結(jié)尾/*，則它與URL完全匹配，因此只會注入 https://mail.google.com/，而不是https://mail.google.com/mail/u/0/#inbox。通常那不是您想要的。
• http://*/*將匹配任何httpURL，但沒有其他方案。例如，這不會將您的腳本注入https網(wǎng)站。

重新加載您的Chrome插件。您訪問的每個頁面現(xiàn)在都會彈出一個警報。讓我們在頁面上記錄第一個URL。

打印URL

jQuery不是必需的，但它使一切變得更容易。首先，從jQuery CDN下載jQuery版本并將其放在插件的文件夾中。我下載了最新的縮小版本jquery-2.1.3.min.js。要加載它，請將其添加到manifest.jsonbefore "content.js"。您的整體manifest.json應(yīng)如下所示：

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

現(xiàn)在有了jQuery，讓我們用它來打印頁面中第一個外部鏈接的URL content.js：

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

console.log(firstHref);

請注意，我們不需要使用jQuery來檢查文檔是否已加載。默認(rèn)情況下，Chrome在DOM完成后注入content.js。

嘗試一下-您應(yīng)該在訪問的每個頁面上的控制臺中看到輸出。

瀏覽器action

當(dāng)插件在地址欄旁邊添加一個小圖標(biāo)時，這是瀏覽器action。您的插件可以監(jiān)聽該按鈕的點(diǎn)擊，然后執(zhí)行某些操作。

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

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

為了使用瀏覽器操作，我們需要添加消息傳遞。

訊息傳遞

插件流程圖

content.js可以訪問當(dāng)前頁面，但是可能訪問的API受到限制。例如，它無法偵聽瀏覽器操作的點(diǎn)擊。我們需要在插件中添加另一種類型的腳本，即background.js，該腳本可以訪問每個Chrome API，但無法訪問當(dāng)前頁面。正如Google所說：

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

因此，content.js將能夠從當(dāng)前頁面中拉出URL，但是需要將該URL移交給background.js才能對其進(jìn)行一些有用的處理。為了進(jìn)行交流，我們將使用Google所謂的消息傳遞，它允許腳本發(fā)送和收聽消息。這是content.js和background.js進(jìn)行交互的唯一方法。

添加以下內(nèi)容以說明manifest.jsonbackground.js：

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

現(xiàn)在，我們將添加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 發(fā)送到當(dāng)前tab。JSON payload 的密鑰可以是任何東西，但為簡單起見我選擇了"message"。現(xiàn)在我們需要在中收聽該消息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 時才運(yùn)行它。每次單擊瀏覽器操作圖標(biāo)，您應(yīng)該看到一個URL記錄到控制臺。如果不起作用，請嘗試重新加載插件名，然后重新加載頁面。

開啟新tab

我們可以使用chrome.tabsAPI打開一個新tab：

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

但是chrome.tabs只能由所使用background.js，因此我們必須添加更多消息傳遞，因為background.js可以打開tab頁，但無法獲取URL。這是主意：

1. 偵聽單擊中的瀏覽器操作background.js。單擊后，將clicked_browser_action事件發(fā)送到content.js。
2. 當(dāng)content.js接收到該事件時，它將頁面上的第一個鏈接的URL。然后將其發(fā)送open_new_tab回background.js以打開URL。
3. background.js偵聽open_new_tab并在收到消息時使用給定的URL打開一個新選項卡。

點(diǎn)擊瀏覽器操作將觸發(fā)background.js，這將向發(fā)送一條消息content.js，這將向返回一個URL background.js，這將打開一個具有給定URL的新tab。

首先，我們需要告知content.js將URL發(fā)送到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});
    }
  }
);

現(xiàn)在我們需要添加一些代碼來告訴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});
    }
  }
);

現(xiàn)在，當(dāng)您單擊瀏覽器操作圖標(biāo)時，它將打開一個新選項卡，其中包含頁面上的第一個外部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"
  }
}

這是完整的目錄結(jié)構(gòu)：

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

參考

How to Make a Chrome Extension