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

在搜索了Google Chrome开发者文档和其他网站之后。。。我在让我的内容脚本自动启动时仍然遇到问题。本质上，我需要内容脚本每x秒轮询一次div innerHtml，并向background.js脚本发送一条消息以进行进一步处理。看起来很简单，但即使指定了“run\u at”：“document\u 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
}

{
  "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
}

my 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();
});

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));
  }
);

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

---

所以这很没意思。感谢您的帮助。

工作代码如下：

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
}

{
  "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();
});

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));
  }
);

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

---

谢谢大家的关注，各位工作代码如下：

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
}

{
  "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();
});

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));
  }
);

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

---

感谢您的关注，伙计们

如果您在内容脚本中放入

console.log

，您能看到它登录到网页的控制台吗？在内容脚本文件中，添加一个事件侦听器“on load”；同时将“document\u end”更改为“document\u start”。我已经在startPoller方法中添加了一个console.log（“一些静态文本”），但是没有看到任何东西try

窗口。addEventListener

而不是

document.addEventListener

。首先要做的是调试内容脚本。设置一个断点，然后单步执行代码，看看会发生什么。顺便说一句，元素可以动态添加，因此您可能希望延迟第一次运行：setTimeout（startPoller，5000）如果您在内容脚本中放入

console.log

，您能看到它记录到网页的控制台吗？在内容脚本文件中，添加一个事件侦听器“on load”；同时将“document\u end”更改为“document\u start”。我已经在startPoller方法中添加了一个console.log（“一些静态文本”），但是没有看到任何东西try

窗口。addEventListener

而不是

document.addEventListener

。首先要做的是调试内容脚本。设置一个断点，然后单步执行代码，看看会发生什么。顺便说一句，可以动态添加元素，因此您可能希望延迟第一次运行：setTimeout（startPoller，5000）