如何确保 chrome 扩展不仅仅适用于本地 HTML 文件答案

【问题标题】：How to ensure a chrome extension does not just work on local HTML files如何确保 chrome 扩展不仅仅适用于本地 HTML 文件
【发布时间】：2019-05-27 16:30:11
【问题描述】：

我一直在开发 chrome 扩展程序，其部分目的是从某些页面中提取公共数据，其域类似于 https://secure.state.gov/。为了开发，我在本地保存了一些 HTML 文件，并一直在用这些文件进行测试。现在我已经可以使用它了，我想尝试使用一些实时公共页面的扩展。但是，当我单击该域的扩展程序时，出现的只是默认的 google 扩展程序菜单，而不是我创建的适用于本地页面的 popup.html。这种行为在除本地 HTML 页面之外的任何网页上都是相同的。

在清单文件中，我尝试将“”添加到权限和内容脚本中。

    "name": "APPNAME!",
    "version": "1.0",
    "description": "DESCRIPTION REDACTED!",
    "permissions": ["activeTab", "declarativeContent", "storage" , "*://secure.state.gov/*", "<all_urls>"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "options_page": "formMenu.html",
    "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"
    },
    "manifest_version": 2,
    "content_security_policy": "script-src 'self' https://code.jquery.com https://cdnjs.cloudflare.com https://stackpath.bootstrapcdn.com https://use.fontawesome.com; object-src 'self'",
    "content_scripts": [{
      "matches": ["<all_urls>"],
      "js": ["payload.js"],
      "run_at": "document_end"
  } ]
  }

没有错误消息产生。我只是得到默认的扩展菜单（“此站点可以读取和更改站点数据>”、“选项”、“从 Chrome 中删除”、“隐藏在 Chrome 菜单中”、“管理扩展”、检查弹出窗口）

【问题讨论】：

这意味着您的后台脚本中没有对该 URL 启用页面操作。
这对我有用@wOxxOm。自从我最初构建扩展以来已经很长时间了，我忘记了在哪里添加了域名。

标签： javascript google-chrome-extension

【解决方案1】：

要设置您的 Chrome 扩展程序以使用本地 HTML 文件和特定域进行测试，请按如下方式设置您的 background.js 文件：

'use strict';

chrome.runtime.onInstalled.addListener(function() {

  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {
            hostEquals: ''
          },
        }),
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {
            hostContains: 'secure.state.gov'
          },
        })
      ],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

【讨论】：