Question

我看过其他相关的SO帖子，而解决方案并没有帮助解决我的问题。这是我的第一个chrome扩展程序，所以请多多包涵！

我正在编写一个简单的chrome扩展程序，该扩展程序可以在网页上搜索用户提供的关键字。我无法获得返回要运行的DOM内容的内容脚本。我从另一篇SO帖子的答案中摘录了一些代码，但似乎无法使它对我有用。

我在文件的顶部放置了console.log（“ hello world”），它没有显示，所以我认为这可能是我项目的结构。

manifest.json

{
    "name": "keyword search",
    "version": "0.0.1",
    "manifest_version": 2,
    "permissions": [ "tabs" , "storage", "activeTab", "<all_urls>"],
    "browser_action": {
        "default_popup": "html/form.html"
    },
    "content_scripts": [{
        "matches": [ "<all_urls>" ],
        "js": [ "js/jquery.min.js", "content_scripts/content_script.js" ]
    }],
    "homepage_url": "http://google.com/"
}

js / popup.js

function run() {
    running = true;
    console.log('running');

    var url = "https://www.stackoverflow.com/"

    // Get KW & category for search
    chrome.storage.local.get(["kw"],
        function (data) {
            kw = data.kw;

            console.log("redirecting to find kw: " + kw);

            // Send current tab to url
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.update(tabs[0].id, {url: url});

                chrome.tabs.sendMessage(tabs[0].id, {type: 'DOM_request'}, searchDOM);
            });
        }
    );
}

function searchDOM(domContent) {
    console.log("beginning dom search \n" + domContent);
}

content_scripts / content_script.js

// Listen for messages
console.log("hello world")
chrome.runtime.onMessageExternal.addListener(function (msg, sender, sendResponse) {
    // If the received message has the expected format...
    if (msg.type === 'DOM_request') {
        // Call the specified callback, passing
        // the web-page's DOM content as argument
        sendResponse(document.all[0].outerHTML);
    }
});

控制台

running
redirecting to find kw: TestKeyword
beginning dom search 
undefined

Answer 1

首先，onMessageExternal是错误的事件（用于external messaging）：
您应该使用标准的onMessage。

第二个chrome扩展API是异步的，因此它仅注册一个作业，立即返回以继续执行代码中的下一条语句，而无需等待作业完成：

chrome.tabs.update使导航进入新URL
chrome.tabs.sendMessage使消息发送作业入队
选项卡中的当前页面上下文与正在运行的内容脚本一起被破坏
该标签开始加载新网址
消息已发送到选项卡，但没有侦听器，
但是此步骤可能会根据各种因素而直接在第2步之后执行，因此在旧页面中运行的内容脚本会收到您不想要的内容
该标签会加载投放的HTML并发出DOMContentLoaded事件
由于默认的"run_at": "document_idle"

至少有三种方法可以对所有时间进行正确计时：

使您的内容脚本发出消息并在弹出窗口中添加onMessage侦听器
使用chrome.tabs.onUpdated等待标签页加载
使用chrome.tabs.onUpdated + chrome.tabs.executeScript简化整个过程

让我们采用executeScript方法。

从manifest.json中删除"content_scripts"

使用以下代码代替chrome.tabs.query（不需要）：

chrome.tabs.update({url}, tab => {
  chrome.tabs.onUpdated.addListener(function onUpdated(tabId, change, updatedTab) {
    if (tabId === tab.id && change.status === 'complete') {
      chrome.tabs.onUpdated.removeListener(onUpdated);
      chrome.tabs.executeScript(tab.id, {
        code: 'document.documentElement.innerHTML',
      }, results => {
        searchDOM(results[0]);
      });
    }
  });
});

内容脚本代码未执行

1 个答案:

让我们采用executeScript方法。