可以讓你存取使用者頁面的 Script
可以使用部分 Chrome 提供的 api 去擷取各種資訊 (e.g:
chrome.runtime.sendMessage()
)
在 manifest.json
檔案中,我們可以設定符合指定的網址,執行我們的 CSS 跟 JS
{
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css": ["app.css"],
"js": ["app.js"]
},
{
"matches": ["http://kejyun.com/", "https://kejyun.com/"],
"css": ["kejyun.css"],
"js": ["jquery.js","kejyun.js"]
}
]
}
在設定的時候,若有需要使用像是 jQuery 套件,則必須在我們自己的 kejyun.js
Script 之前就載入 jqeury.js
,所以陣列的順序會影響載入的順序
app.js
在 app.js
檔案中我們加入一個簡單的 alert()
印出該網域
// app.js
alert(document.domain);
編輯完後重新載入套件讓他可以讀取新的設定跟程式,我們到 Google 網站去測試,就可以看到下列的 alert
訊息了
在我們的 popup.html
當中,我們可以載入這個頁面的 js
沒辦法使用任何 Chrome 提供的 API 去進行操作
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<script src="popup.js"></script>
</head>
<body>
Hello World
</body>
</html>
popup.js
在 popup.js
當中我們一樣載入一個簡單的 alert,去印出他的網域
alert(document.domain);
編輯完後重新載入套件讓他可以讀取新的設定跟程式,我們點選套件的按鈕,就可以看到下列的 alert
訊息了
這裡你會發現印出來的 alert 訊息是 nihpfhbicpcnoabjombmmdmkalbpgbem,而不是我們所熟知的網域,其實這裡的網域指的是該套件的字定義網域,可以在擴充功能套件中看到這個 ID
所以 popup.js
僅能夠存取該頁面顯示的資料內容
像是我如果將 popup.js
程式改為修改文件頁面資料時,你會看到只有該 popup 的頁面資料會被修改到
document.write('Hi Taiwan');
在套件背景執行的 Script,沒辦法直接存取使用者頁面上任何的 DOM
可以使用全部 Chrome 提供的 API 套件
在 manifest.json
檔案中,我們可以設定我們的 Background Script 在哪裡,這裡也跟 Content Script 一樣,JS 檔案的順序會影響載入的順序
{
"background": {
"scripts": ["jquery.js", "background.js"]
},
}
background.js
alert(document.location);
編輯完後重新載入套件讓他可以讀取新的設定跟程式,就可以看到下列的 alert
訊息了,你會發現 Backgound Script 是在 chrome-extension://nihpfhbicpcnoabjombmmdmkalbpgbem/_generated_background_page.html
路徑當中