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

但这会导致以下错误：

注入脚本时出错：无法访问 页。扩展清单必须请求访问权限 各自的主机。

我的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 脚本）获取页面源。但我无法通过“背景”或“内容脚本”获得它。为什么会这样？实现这一目标的正确方法是什么？

Answer 1

这是关于权限的。
你的例子有点不够，但我可以看到你正在使用“activeTab”权限。

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

• 执行浏览器操作
• 执行页面操作
• 执行上下文菜单项
• 从命令 API 执行键盘快捷键
• 接受来自多功能框 API 的建议

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

要在不执行这些操作的情况下访问选项卡，您需要申请以下权限：

• tabs
• <all_urls>

请注意，它允许您在每个选项卡上运行内容脚本，而不仅仅是活动选项卡。

这是最简单的例子：

ma​​nifest.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)
            }
        });
    }
});