Question

我正在处理我的第一个Chrome扩展程序。它是一个（理论上）简单的扩展，它只做一件事：在选项卡打开时（不点击扩展图标），它应该查看页面DOM，并隐藏一个特定的div。

从some articles on Stack Overflow，我决定采用一种模式：

在manifest.json中，指向主要背景文件（main.js），并将另一个文件（content.js）定义为content_scripts之一。
在main.js中，在创建标签页上，向content.js脚本发送消息，传递回调以与页面内容一起运行。
在content.js中，收听消息，然后在消息上隐藏页面中的div。

不幸的是，第三步似乎根本没有运行（所以消息中的回调也都没有发送）。我一直无法找出原因，但似乎代码没有运行。我在Stack Overflow上看了很多（here's a recent search），并且无法弄清楚什么不起作用。

非常感谢您的想法/想法。

这是我目前的代码：

注意，我无法找到一个好的调试设置。添加了Chrome Apps & Extensions Developer tool，但它似乎不允许我使用debugger或查看控制台日志，所以我现在只是提醒。如果你在这里有建议，他们也会非常感激。

的manifest.json

{
  "manifest_version": 2,
  "name": "Inertia",
  "description": "My fun chrome extension!",
  "version": "1.0",
  "background": {
    "scripts": ["main.js"]
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": ["tabs"]
}

main.js

chrome.tabs.onCreated.addListener(function(tab) {
    alert('above send')
    alert(JSON.stringify(tab))
    chrome.tabs.sendMessage({ Message: 'hideCenter' }, function (doc) {
      alert('in callback')
      alert(doc)
      alert(doc.innerHTML)
      const center = doc.getElementById('center');
      if (center) {
        alert('found center');
        center.style.display = 'none';
        center.style.opacity = '0';
        alert(center)
      } else {
        alert('woops');
      }
    });
});

content.js

alert('above message listener');
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  alert('runtime');
  alert(JSON.stringify(request))

  if (request.Message === 'hideCenter') {
    alert('message text');
    alert(document.all[0].outerHTML);
    sendResponse(document);
  } else {
    alert('different message');
    alert(request.Message)
  }
})

在所有警报中，只有两个显示：above send和它下面的JSON.stringify(tab)，它会记录一个看起来像我怀疑它应该的JSON对象。

知道我在这里做错了什么，以及如何正确地将这些东西挂在一起？谢谢！

编辑以回应@wOxxOm的反馈：

我添加tab.id作为sendMessage的第一个参数。之前我曾经这样做过，但是根据this question上接受的答案进行了更改。

无论如何，当我添加回来时，打开一个新标签现在会在回调中点击警报！但doc未定义，因此会在doc.innerHTML上中断。它似乎在跟随链接（即打开包含内容的新页面）时起作用 - 点击包括在侦听器中的所有警报，并成功记录页面内容。

我将继续玩这个，因为我怀疑我必须等到我当前的新标签扩展程序向页面添加内容（我试图在该扩展程序之上构建它，并且改变它添加的内容），但如果有人知道新标签为什么没有document对象，请告诉我。

Chrome扩展程序未接收runtime.onMessage侦听器

0 个答案: