7

在我的 Chrome 扩展程序的后台页面中，我需要执行以下操作：

  1. 创建一个带有 html 页面的选项卡，该页面位于我的扩展文件夹中或由后台页面动态生成；
  2. 加载新选项卡后，在其中注入内容脚本以使用消息传递；
  3. 注入脚本后，向新选项卡发送一条带有一些数据的消息。

这总是会变成错误：
tabs.executeScript：无法访问 url“”的内容。扩展清单必须请求访问此主机的权限。
或者，如果页面或脚本存储在我的扩展文件夹中的 .html 和 .js 专用文件中：
tabs.executeScript：无法访问 url“chrome-extension://ehdjfh.../page.html”的内容。扩展清单必须请求访问此主机的权限。

执行时会产生错误chrome.tabs.executeScript()并阻止内容脚本注入。（我需要这个结构将一些大数据传递给选项卡，如果直接作为字符串传递到编码的 html url 中，这些数据将被截断）

这是一个代码示例，可用于将行为测试到工作扩展中，只需复制粘贴并在 Chrome 中加载扩展：

背景.js

chrome.browserAction.onClicked.addListener(function() {
    var getSampleHTML = function() {
        return 'javascript:\'<!doctype html><html>' +
            '<head></head>' +
            '<body>' +
            '<p id="myId">page created...</p>' +
            '</body>' +
            '</html>\'';
    };

    // create a new tab with an html page that resides in extension domain:
    chrome.tabs.create({'url': getSampleHTML(), 'active': false}, function(tab){
        var getSampleScript = function() {
            return 'chrome.extension.onRequest.addListener(' +
                'function(request, sender, sendResponse) {' +
                    'if(request.action == "print_data" && sender.tab.id == ' + tab.id + '){' +
                        'var p = document.getElementById("myId");' +
                        'p += "<br>data received: " + request.data;' +
                    '}' +
                '});'
                'document.getElementById("myId").innerHTML += "<br>content-script loaded...";'
        };
        // inject the content-script in the page created:
        chrome.tabs.executeScript(tab.id, {code: getSampleScript()}, function(){
            // send the data to the content-script:
            chrome.tabs.sendRequest(tab.id, {action: "print_data",
                                             data: "some long data"});
        });
    });
});

清单.json

{
  "name": "ContentScript Injection Sample",
  "description": "",
  "version": "0.1",
  "permissions": ["tabs"],
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "open a new tab and inject contentscript"
  },
  "manifest_version": 2
}
4

1 回答 1

6

好的，这是一个可能的解决方案，感谢@RobW和@方觉指出我的错误（我的错误是将本地网页打开到新创建的选项卡中视为普通网页，而不是直接访问chrome。扩展 API，例如弹出窗口）：

背景.js

chrome.browserAction.onClicked.addListener(function() {
    // create a new tab with an html page that resides in extension domain:
    chrome.tabs.create({'url': chrome.extension.getURL("page.html"), 
                        'active': false}, function(tab){
        var selfTabId = tab.id;
        chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
            if (changeInfo.status == "complete" && tabId == selfTabId){
                // send the data to the page's script:
                var tabs = chrome.extension.getViews({type: "tab"});
                tabs[0].doSomething("some long data");
            }
        });
    });
});

page.html

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <p id="myId">page created...</p>
        <script src="page.js" type="text/javascript"></script>
    </body>
</html>

page.js

var alreadyRun = false;
function doSomething(data){
    if (!alreadyRun) {
        var p = document.getElementById("myId");
        p.innerHTML += "<br>data received: " + data;
        // needed because opening eg. DevTools to inpect the page
        // will trigger both the "complete" state and the tabId conditions
        // in background.js:
        alreadyRun = true; 
    }
}
document.getElementById("myId").innerHTML += "<br>script loaded...";

我不太喜欢这个解决方案是使用chrome.tabs.onUpdated.addListener()来检查创建的选项卡是否已完全加载，并且以这种方式触发任何打开的选项卡的状态更改（它没用......会很棒仅对感兴趣的选项卡运行检查的方式）

于 2013-08-05T17:53:44.547 回答