How to ensure a chrome extension does not just work on local HTML files

Question

I have been working on a chrome extension which is intended in part to pull public data from certain pages with at a domain similar to https://secure.state.gov/ . For development, I have saved some of the HTML files locally and have been testing with those. Now that I have it working, I would like to try the extension with some live public pages. But when I click the extension at that domain, all that appears is the default google extension menu, and not the popup.html that I created which works local pages. This behavior is the same on any webpage other than the local HTML pages.

In the manifest file, I have tried adding "" to both permissions and content_scripts.

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

No error messages result. I simply get the default extension menu ("This site can read and change site data >", "Options", "Remove from Chrome", "Hide in Chrome Menu", "Manage Extensions", Inspect Popup)

Answer 1

To set up your Chrome extension for testing with local HTML files, and with particular domains, set it up your background.js file as follows:

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