Question

我正在尝试创建Chrome扩展程序，它会从我的网页中删除数据，然后将其显示在浏览器操作窗口中。我想为此使用后台页面，因为如果我正确理解扩展，它只是能够不间断工作的元素，而不需要可见的选项卡。

问题是，当我使用background.js时，我为background.js编写的脚本无法正常工作：

var location = window.location.href = 'http://localhost/index.php';
console.log(location);

的manifest.json：

"background": {
 "scripts": ["src/background/background.js"]
},

我得到的答案是chrome-extension：//some_random_text/_generated_background_page.html。

可以使用背景页面导航到我的网页，然后填写一些表格和报废数据供以后使用吗？

Answer 1

这是一个老问题，但我最近想完全一样。所以我会为有兴趣的人提供答案。

设置window.location仍然无法在Chrome52中运行。但有一个解决方法。您可以先使用fetch（）获取网页，然后使用document.write设置内容。

这样可以正常工作，然后您可以查询文档并使用它完成所需的一切。

这是一个例子。（请注意，我正在使用fetch API，箭头函数和LET，这些都在Chrome52中运行良好）。

fetch("http://cnn.com").then((resp) => {
  return resp.text();
}).then((html) => {
  document.open("text/html");
  document.write(html);
  document.close();

  // IMPORTANT: need to use setTimeout because chrome takes a little 
  // while to update the document.
  setTimeout(function() {
    let allLinks = document.querySelectorAll('a');
    // Do something with the links.
  }, 250);
});

Answer 2

Chrome扩展程序有两个主要部分，扩展程序和浏览器本身。背景页面适用于扩展过程。它没有直接访问权限和有关您的网页的信息。

要让脚本在您的网页上不间断运行，您需要使用Content Scripts。

然后，您可以使用messages

在内容脚本和背景页面之间进行通信

<强> contentScript.js

var location = window.location.href = 'http://localhost/index.php';
chrome.runtime.sendMessage({location: location}, function(response) {});

<强> background.js

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

后台页面可以使用window.location

2 个答案: