title: How to get content_scripts to execute in file:/// URLs in a Chrome extension
body: <p>I can't seem to make this work no matter what I do. Let me demonstrate with a very simple example extension. Here is the <code>manifest.json</code>:</p>
  
  <pre><code>{
    "manifest_version": 2,
  
    "name": "Sample Of Content Script",
    "description": "Changes the background of a page pink",
    "version": "1.0",
  
    "content_scripts": [
      {
        "matches": [ "&lt;all_urls&gt;" ],
        "js": [ "changer.js" ]
      }
    ],
  
    "permissions": [
      "webNavigation"
    ],
  
    "background": {
      "scripts": [ "background.js" ]
    }
  }
  </code></pre>
  
  <p>Notice that my <code>content_scripts</code> entry matches <code>all_urls</code>, which (according to <a href="https://developer.chrome.com/extensions/match_patterns" rel="noreferrer">Google documentation</a>) should match <code>file:///</code> URLs.</p>
  
  <p>The <code>background.js</code>:</p>
  
  <pre><code>(function (chrome) {
      'use strict';
  
      chrome.webNavigation.onCompleted.addListener(function (details) {
          chrome.tabs.sendMessage(details.tabId, {
              action: 'changeBackground',
              color: 'pink'
          });
      });
  
  })(chrome);
  </code></pre>
  
  <p>And the <code>changer.js</code> (content script):</p>
  
  <pre><code>(function (chrome) {
      'use strict';
  
      chrome.runtime.onMessage.addListener(function (request) {
          if (request.action !== 'changeBackground') { return; }
          document.body.style.background = request.color;
      });
  
  })(chrome);
  </code></pre>
  
  <p>This extension has been published on the Chrome Web Store so you can see the result in action:</p>
  
  <p><a href="https://chrome.google.com/webstore/detail/sample-of-content-script/bkekbfjgkkineeokljnobgcoadlhdckd" rel="noreferrer">https://chrome.google.com/webstore/detail/sample-of-content-script/bkekbfjgkkineeokljnobgcoadlhdckd</a></p>
  
  <p>It's a pretty simple extension. Navigate to a page, and it turn's the page's background pink. Unfortunately, it doesn't work for any <code>file:///</code> URLs. The <code>changer.js</code> script is not loaded into the page, and nothing happens.</p>
  
  <h1>Extra info</h1>
  
  <ul>
  <li>It actually <strong>seems</strong> to work just fine when running as an <em>Unpacked extension</em> in <em>Developer mode</em>. Pages loaded from the file system turn pink. </li>
  <li>I tried using <code>chrome.tabs.executeScript()</code> instead of putting the script into the manifest. This failed in a more obvious way, saying that I didn't request permissions to modify <code>file:///</code> URLs in the manifest.</li>
  <li>I added <code>"file:///*/*"</code> to the <code>permissions</code> section of <code>manifest.json</code>. That seemed to workwell with <code>chrome.tabs.executeScript()</code>, but the Chrome Web Store rejected the extension, saying that <code>file:///</code> permissions are not allowed.</li>
  <li>I reverted to a <code>content_script</code> section in <code>manifest.json</code> and tried adding <code>"file:///*/*</code> to the <code>matches</code> section in the manifest. Again, this worked in a development build, but when I uploaded it to the Chrome Web Store and then installed it, it didn't work.</li>
  </ul>