[好讀版]

在講這個的主題之前，先來認識一下內容腳本的執行環境。簡單的說，『內容腳本』與『當前網頁』共用一個 DOM，也就是可以取得或修改『當前網頁』的 DOM，甚至是對某個 element 綁定事件等。但是，『內容腳本』與『當前頁面』的 javascript 執行環境是隔離的，也就是說他們彼此之間是無法取得對方的變數或是呼叫對方的 function。

了解內容腳本的執行環境後，來看一個例子，jquery-injector 的用途是在當前頁面加入 jQuery，可是前面不是說『內容腳本』與『當前頁面』的執行環境是分隔的嗎？ 為什麼可以在『當前頁面』的執行環境加入 JavaScript？ 這就是今天要說的主題，不過，我們先來看比較簡單的『嵌入 HTML』。

嵌入 HTML

既然內容腳本可以取得或修改當前頁面的 DOM，那要嵌入 HTML 也就不是什麼難事。方法如下所示。

(function (){
var element = document.createElement('div');
element.innerHTML = 'hello, inject html';
document.body.appendChild(element);
}());

**溫馨小提醒：**如果需要某個事件觸發後再嵌入 HTML，可以使用 Programmatic injection。

嵌入 JavaScript

試想一下，既然都可以嵌入 HTML，那可不可以嵌入一個 element 為 script？ 當然可以，方法如下所示。

(function (){
var element = document.createElement('script');
element.type = "text/javascript";
element.src = chrome.runtime.getURL("js/jQuery-2.1.1.min.js");;
document.body.appendChild(element);
}());

說明：chrome.runtime.getURL 可以取得 extension 內部檔案的絕對路徑。
**溫馨小提醒：**如果要將資源加入到『當前頁面』需要在 manifest.json 設定檔中加入白名單。如下所示。

manifest.json

{
...
"web_accessible_resources": [
"js/jQuery-2.1.1.min.js"
],
...
}

**溫馨小提醒：**若非必要，個人是不建議在當前網頁嵌入 JavaScript 的，因為有可能會與當前頁面發生衝突。如果是需要與嵌入的畫面(HTML)互動，內容腳本就可以做到了，或是使用嵌入 iframe 的方式。