Chrome Extension 開發入門篇 10 - Chrome Extension 內容腳本

內容腳本的原文為 content scripts，所謂的 content 就是目前所開啟的網頁內容，那 content scripts 就是在目前開啟的頁面執行 javascript 程式碼。

其實官方文件已經寫的很清楚，那接下來就將適合初學者的部分整理一下。

什麼時候需要使用內容腳本？

當需要修改目前頁面的 DOM 時，例如：

• 將所有網址套上超鏈接
• 修改字體大小
• 嵌入一個『分享』按鈕

內容腳本的限制

• 無法呼叫所有的 chrome.* API (除了 extension, i18n, runtime, storage 的一部份)
• 無法使用 Extension 的任何頁面中定義的變數或函數
• 無法使用網頁或其他內容腳本中定義的變數或函數

加入內容腳本的方法

如果內容腳本每一次都需要在當前頁面執行，就在設定檔中定義 content_scripts，如以下例子所示：

manifest.json

{
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

如果只是有時需要執行，可以設定 permissions，如以编程方式插入部分所述。

manifest.json

{
  ...
  "permissions": [
    "tabs", "http://www.google.com/*"
  ],
  ...
}

以編程方式插入

如果您的 JavaScript 或 CSS 不需要插入匹配的每一个頁面時，例如，如果您希望當使用者單擊瀏覽器按鈕的圖示時才執行內容腳本，以编程方式插入程式碼就十分有用。

要向頁面中插入程式碼，您的 Extension 必须擁有該頁面的主機權限，並且還需要用到 chrome.tabs 模組。您可以使用設定檔 (manifest.json) 中的 permissions 字段獲得這些權限。

一旦您擁有了相應的權限，您可以通過呼叫 tabs.executeScript 向頁面插入 JavaScript。要插入 CSS 請使用tabs.insertCSS。

下列程式碼（来自 make_page_red 例子）當使用者單擊瀏覽器按鈕時向當前標籤頁插入並執行 JavaScript 程式碼。

background.html

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
  }); 
});

manifest.json

"permissions": [
  "activeTab"
],

通常不會直接插入程式碼 (如前面的例子所示) ，而是將程式碼放在一個文件中。您可以像這樣插入文件的內容：

chrome.tabs.executeScript(null, {file: "content_script.js"});

結語：

內容腳本通常與當前網頁內容有關，目的在取得或修改當前頁面的 DOM，如果您有問題，歡迎在下方留言。謝謝！