chrome 扩展：在页面加载时获取当前页面的来源 HTML

Question

我找到了关于如何抓取当前标签页面源的答案： Getting the source HTML of the current page from chrome extension

但是，此答案要求用户按下扩展弹出窗口。

我想知道如何在加载页面时访问页面源代码（无需调用弹出窗口）。

在我的 background.js 我已经厌倦了这个：

chrome.tabs.onUpdated.addListener(function (tabId , info) {
  console.log(info)

  chrome.tabs.executeScript(null, {
    file: "getPagesSource.js"
  }, function() {
    if (chrome.runtime.lastError) {
      message.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
    }
  });
});

但这会导致以下错误：

There was an error injecting script : Cannot access contents of the page. Extension manifest must request permission to access the respective host.

我的manifest.js:

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["declarativeContent",
                    "https://www.example.com/*",
                    "storage",
                    "activeTab"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
      },
    "content_scripts": [
      {
        "matches": [
          "<all_urls>"
        ],
        "js": ["content.js"]
      }
    ],
    "options_page": "options.html",
    "manifest_version": 2,
    "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png",
            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
          }
    },
    "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
  }

我不认为问题真的出在权限上，因为我能够从 popup.html（即 page_action 脚本）获取页面源代码。但我无法通过 "background" 或 "content_scripts" 获取它。为什么会这样？实现此目的的正确方法是什么？

Answer 1

是权限问题。
你的例子有点不够，但我可以看到你正在使用 "activeTab" 权限。

根据 activeTab docs，扩展将在执行以下任何操作后获得对当前选项卡的访问权限（例如源）：

Executing a browser action

Executing a page action

Executing a context menu item

Executing a keyboard shortcut from the commands API

Accepting a suggestion from the omnibox API

这就是为什么您可以在打开弹出窗口后获取资源的原因。

为了在没有这些操作的情况下访问选项卡，您需要请求以下权限：

tabs
<all_urls>

请注意，它允许您在每个选项卡上运行 content-script，而不仅仅是活动选项卡。

这是最简单的例子：

manifest.json

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["tabs", "<all_urls>"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

background.js

chrome.tabs.onUpdated.addListener(function (tabId, info) {
    if(info.status === 'complete') {
        chrome.tabs.executeScript({
            code: "document.documentElement.innerHTML" // or 'file: "getPagesSource.js"'
        }, function(result) {
            if (chrome.runtime.lastError) {
                console.error(chrome.runtime.lastError.message);
            } else {
                console.log(result)
            }
        });
    }
});

chrome 扩展：在页面加载时获取当前页面的来源 HTML

chrome extension: Getting the source HTML of the current page on page load

google-chrome

google-chrome-extension

google-chrome-devtools