Background service modifying new tab page, manifest V3, - what permissions needed

Question

I am trying to make a chrome extension which overrides the new tab page and then a background service makes changes to that page. So in my manifest I have (among other things):

  "manifest_version": 3,
      "chrome_url_overrides": {
        "newtab": "newtab.html"
      },
  "permissions": [  "scripting", "activeTab" ... and many many others!

This works fine in as much as when I add a new tab I indeed see the contents of the file I put in my own custom "newtab.html".

In the manifest I also put...

"host_permissions": [
    "<all_urls>",
    "chrome://newtab/"
],

...then in my background service, just as a test, I put:

chrome.scripting.executeScript({
  target: { tabId: tabId },
    func: () => {
    const h1 = document.createElement('h1');
    h1.textContent = 'Hello';
    document.body.appendChild(h1);}
  });

But when this code runs I get:

Uncaught (in promise) Error: Cannot access contents of url "chrome-extension://mhjkkbnnfoaeadgpnoheabgocjfhgkli/newtab.html". Extension manifest must request permission to access this host.

I have searched widely for answers and have added many different permissions and host_permissions but nothing has worked so far.

Answer 1

Chrome doesn't allow executeScript on extension's own pages, but there's no need for it anyway.

1. Remove permissions, host_permissions, and background from manifest.json.
2. Add <script src=newtab.js></script> at the end of your html
3. Use the standard JS and DOM methods inside newtab.js