title: Extension manifest must request permission to access the respective host or a different Error
body: <p>I'm trying to build an extension, and I'm having trouble injecting a function.</p>
  <p>This is the link that I'm trying to work on, I suspect that the blob at the start is the problem.</p>
  <pre><code>blob:https://web.whatsapp.com/29d92fb3-d8e1-4c84-89af-b51668f5d2b3
  </code></pre>
  <p>This is my manifest.json file:</p>
  <pre><code> {
      &quot;name&quot;: &quot;Image rotator&quot;,
      &quot;version&quot;: &quot;1.0&quot;,
      &quot;manifest_version&quot;: 3,
      &quot;description&quot;: &quot;An extension to rotate images in web page.&quot;,
      &quot;background&quot;: {
          &quot;service_worker&quot;: &quot;src/background.js&quot;
        },
        &quot;permissions&quot;: [&quot;contextMenus&quot;,&quot;scripting&quot;,&quot;storage&quot;, &quot;declarativeContent&quot;, &quot;activeTab&quot;,&quot;&lt;all_urls&gt;&quot;],
        &quot;host_permissions&quot;: [
          &quot;*://web.whatsapp.com/*&quot;
        ]
        
  }
  </code></pre>
  <p>This is my background.js file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>chrome.runtime.onInstalled.addListener(() =&gt; {
    chrome.contextMenus.create({
      "id": "rotateImage",
      "title": "Rotate Image",
      "contexts": ["image"]
    })
  });
  
  function injectedFunc() {
    document.getElementsByTagName("img").style.transform = "rotate(90deg)";
  };
  
  try {
    chrome.contextMenus.onClicked.addListener((tab) =&gt; {
      chrome.scripting.executeScript({
        target: {
          tabId: tab.id
        },
        function: injectedFunc
      });
    });
  } catch (e) {
    console.error(e);
  }</code></pre>
  </div>
  </div>
  </p>
  <p>In this version, I get this error:</p>
  <blockquote>
  <p>Error in event handler: TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Error at property 'target': Missing required property 'tabId'.</p>
  </blockquote>
  <p>If I change the onClicked method to this version:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>try{
  chrome.contextMenus.onClicked.addListener((info, tab) =&gt; {
      if(info.menuItemId === "rotateImage"){
      chrome.scripting.executeScript({
          target: {tabId: tab.id},
          function: injectedFunc
        });}
    });
  } catch (e) {
      console.error(e);
    }</code></pre>
  </div>
  </div>
  </p>
  <p>I get this error:</p>
  <blockquote>
  <p>Uncaught (in promise) Error: Cannot access contents of the page. Extension manifest must request permission to access the respective host.</p>
  </blockquote>