Chrome 扩展：加载时自动启动内容脚本答案

【问题标题】：Chrome Extension: Auto-start content script on loadChrome 扩展：加载时自动启动内容脚本
【发布时间】：2017-10-09 14:11:42
【问题描述】：

在搜索 SO、Google Chrome 开发人员文档和其他网站之后...我仍然无法让我的内容脚本自动启动。本质上，我需要内容脚本每隔 x 秒轮询一次 div innerHtml 并向 background.js 脚本发送一条消息以进行进一步处理。看起来很简单，但即使指定了“run_at”：“document_end”，它也永远不会启动。我怀疑这是微不足道的，所以我只是在寻找其他的眼睛来指引我正确的方向。此外，它需要在完全没有用户交互的情况下运行。

这是我的 manifest.json 文件：

{
  "name": "My Extension Name",
  "description": "Extension description",
  "version": "1.0",
  "background": {
    "scripts": ["bg.js"]
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ],
  "content_scripts": [{
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"],
      "run_at": "document_start",
    }],
  "manifest_version": 2
}

我的 content.js 文件：

var pollInterval = 30000;
var timerId;

function startPoller() {
  var elementOfInterest = document.getElementById('id_of_interest');
  var content = elementOfInterest.innerHtml;
  chrome.runtime.sendMessage({payload: content});
  timerId = window.setTimeout(startPoller, pollInterval);
}

document.addEventListener('DOMContentLoaded', function () {
  startPoller();
});

和 bg.js 文件：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(JSON.stringify(request));
  }
);

所以这很无趣。帮助表示赞赏。

【问题讨论】：

如果你把console.log 放在你的内容脚本中，你能看到它记录到网页的控制台吗？
在内容脚本文件中，添加“on load”事件监听器；还将“document_end”更改为“document_start”
我在 startPoller 方法中添加了一个 console.log('some static text') 但什么也没看到
试试window.addEventListener 而不是document.addEventListener。
首先要调试内容脚本。设置断点，然后单步执行代码，看看会发生什么。顺便说一句，元素可能是动态添加的，因此您可能希望延迟第一次运行： setTimeout(startPoller, 5000)

标签： javascript google-chrome-extension polling

【解决方案1】：

工作代码如下：

manifest.json 文件：

{
  "name": "My Extension Name",
  "description": "Extension description",
  "version": "1.0",
  "background": {
    "scripts": ["bg.js"]
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ],
  "content_scripts": [{
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"],
      "run_at": "document_start",
    }],
  "manifest_version": 2
}

content.js 文件：

var pollInterval = 5000;
var timerId;

function startPoller() {
  try {
    console.log('startPoller called');
    var elementOfInterest = document.getElementById('nav_home');
    if (elementOfInterest !== undefined && elementOfInterest !== null) {
      var content = elementOfInterest.innerHTML;
      chrome.runtime.sendMessage({payload: content});
    }
  } catch (error) {
    console.log(error);
  }
  timerId = window.setTimeout(startPoller, pollInterval);
}

window.addEventListener('DOMContentLoaded', function () {
  console.log('window.addEventListener');
  startPoller();
});

bg.js 文件：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(JSON.stringify(request));
  }
);

谢谢大家的关注

【讨论】：