iT邦幫忙

DAY 10
0

Chrome Extension 學習筆記系列 第 10

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"});


上一篇
Chrome Extension 開發入門篇 09 - Chrome Extension 事件頁面
下一篇
Chrome Extension 開發經驗篇 11 - 如何快速建立新的 Extension?
系列文
Chrome Extension 學習筆記30

尚未有邦友留言

立即登入留言