javascript - for - Chrome擴展程序-從網頁檢索全局變量




debugger for chrome (3)

內容腳本在隔離的環境中運行。 要訪問(頁面window )任何全局屬性,您必須注入新的<script>元素,或使用事件偵聽器來傳遞數據。

有關在頁面上下文中註入<script>元素的示例,請參閱此答案 。

contentscript.js (清單中的"run_at": "document_end" ):

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.remove();
};

// Event listener
document.addEventListener('RW759_connectExtension', function(e) {
    // e.detail contains the transferred data (can be anything, ranging
    // from JavaScript objects to strings).
    // Do something, for example:
    alert(e.detail);
});

script.js - 位於擴展目錄中,它將被注入頁面本身:

setTimeout(function() {
    /* Example: Send data from the page to your Chrome extension */
    document.dispatchEvent(new CustomEvent('RW759_connectExtension', {
        detail: GLOBALS // Some variable from Gmail.
    }));
}, 0);

由於此文件是通過DOM中的chrome-extension:URL加載的,因此必須將“script.js”添加到清單文件的web_accessible_resources部分。 否則Chrome將拒絕加載腳本文件。

您應該在網頁中盡可能少地運行邏輯,並在內容腳本中處理大部分邏輯。 這有多種原因。 首先,頁面中註入的任何腳本都在與網頁相同的上下文中運行,因此網頁可以(故意或無意)修改JavaScript / DOM方法,使擴展程序停止工作。 其次,內容腳本可以訪問額外的功能,例如chrome。* API和跨源網絡請求的有限子集(前提是擴展已聲明這些功能的權限)。

我正在開發Chrome擴展程序。 我希望解析“原始”Gmail郵件(當前查看的郵件)的內容。

我試圖利用jQuery.load()如下

$(windows).load(function() { alert(GLOBALS); });

並將其放在內容腳本中,但它也不起作用。 我正在使用Chrome的開發人員工具,它會在調用alert(GLOBALS);返回以下錯誤alert(GLOBALS);

未捕獲的ReferenceError:未定義GLOBALS

雖然,當使用開發人員工具的控制台時,鍵入控制台GLOBALS它會返回一個數組。

有關如何從內容腳本訪問GLOBALS的任何線索?


有一個新的網頁API可以安全地進行通信,而且沒有任何副作用(window.postMessage可以有其他監聽器!)到內容腳本。

“從網頁中,使用runtime.sendMessage或runtime.connect API將消息發送到特定應用或擴展”

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    if (!response.success)
    handleError(url);
});

“從您的應用程序或擴展程序中,您可以通過runtime.onMessageExternal或runtime.onConnectExternal API收聽來自網頁的消息,類似於跨擴展消息傳遞。只有網頁才能啟動連接。[...]”

(來自http://developer.chrome.com/extensions/messaging.html )這仍然只在chrome的開發頻道中可用,但似乎它將在下一個版本左右。

不要問我這是如何工作的,這似乎非常令人困惑。 如何在網頁上定義chrome.runtime? 如果腳本由於某種原因已經定義了該變量怎麼辦? 我也找不到鉻蟲報告,看看這個功能的發展歷史。


用於在chrome擴展content_script和頁面上的javascript之間進行通信的更現代的解決方案是使用html5 postMessage API。 發送到“窗口”的任何消息都可以從網頁上的javascript和擴展名的content_script中看到。

擴展名的content_script.js:

window.addEventListener('message', function(event) {
    console.log('content_script.js got message:', event);
    // check event.type and event.data
});

setTimeout(function () {
    console.log('cs sending message');
    window.postMessage({ type: 'content_script_type',
                         text: 'Hello from content_script.js!'},
                       '*' /* targetOrigin: any */ );
}, 1000);

網頁上運行的javascript:

window.addEventListener('message', function(event) {
    console.log('page javascript got message:', event);
});

setTimeout(function() {
    console.log('page javascript sending message');
    window.postMessage({ type: 'page_js_type',
                         text: "Hello from the page's javascript!"},
                       '*' /* targetOrigin: any */);
}, 2000);

另請參閱http://developer.chrome.com/extensions/content_scripts.html#host-page-communication







google-chrome-extension