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

Question

I found this answer on how to grab the page source of current tab: Getting the source HTML of the current page from chrome extension

However, this answer requires user to press the extension popup.

I would like to know how I can access the page source upon loading of page (without having to invoke the popup).

In my background.js I've tired this:

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

but this results in the following error:

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

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

I don't think the issue is really with permissions because I am able to get the page source from the popup.html (which is page_action script). But I am not able to get it via "background" or "content_scripts". Why is that and what is the proper way to accomplish this?

Answer 1

It is about the permissions.
Your example a bit insufficient, but as I can see you are using "activeTab" permission.

According to the activeTab docs, the extension will get access (e.g. sources) to current tab after any of these actions will be performed:

• 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

That's why you can get sources after opening the popup.

In order to get access to tabs without those actions, you need to ask for the following permissions:

• tabs
• <all_urls>

Be noted, it allows you to run content-script on every tab, not only the active one.

Here is the simplest example:

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