Error message: Unchecked runtime error - Unable to retrieve data from the specified URL. The extension manifest must include permission to access this particular host. This issue is occurring in manifest

Can someone help me out? I keep on receiving the error messages

Unchecked runtime.lastError: Cannot access contents of url. Extension manifest must request permission to access this host.
and
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
in google chrome manifest 3.

Listening from content script

chrome.runtime.onMessage.addListener(
function(req, sender, sendResponse) {
    if(req.msg === "analysis background") {
        let obj = parse();
        sendResponse(obj);
    }
        
    return true;
}
); 
); 

manifest.json

{
    "manifest_version": 3,
    "name": "extensionParser",
    "version": "1.0.0",
    "action": { 
        "default_popup": "popups/popup.html"
      },
    "background": {
        "service_worker": "background.js"
    },
    "permissions": ["tabs", "scripting",
        "http://localhost/site_for_parsing"]
}

Code snippet from background file

const siteUrl = "http://localhost/site_for_parsing";

chrome.runtime.onConnect.addListener(port => {
    port.onMessage.addListener(msg => {
        if(msg.message === 'analysis') {
            chrome.tabs.create({active: false, url: siteUrl}, tab => {
                chrome.scripting.executeScript({
                    target: {tabId:tab.id},
                    files: ['dist/parser.js']
                }, (results) => {
                    chrome.tabs.sendMessage(tab.id, {msg: "analysis background"}, res => {
                        port.postMessage(res)
                        chrome.tabs.remove(tab.id)
                    })
                })
            });
        }

    });
});

I would greatly appreciate your assistance! Looking forward to your responses. Have a wonderful day!

Answer №1

  1. It is important to add site permissions to `host_permissions` instead of `permissions`, for more information refer to this link.
  2. In ManifestV3, using create + executeScript in Chrome versions older than 100 may cause bugs. To workaround this issue, either revert back to ManifestV2 until Chrome 100 is stable or follow the solution provided in this report.

Waiting for the URL to be set:

(async () => {
  const tab = await chrome.tabs.create({url: 'https://www.example.com'});
  const tabId = tab.id;
  if (!tab.url) await onTabUrlUpdated(tabId);
  const results = await chrome.scripting.executeScript({
    target: {tabId},
    files: ['content.js'],
  });
  chrome.tabs.sendMessage(tabId, {msg: 'analysis background'}, res => {
    port.postMessage(res);
    chrome.tabs.remove(tabId);
  });
})();

function onTabUrlUpdated(tabId) {
  return new Promise((resolve, reject) => {
    const onUpdated = (id, info) => id === tabId && info.url && done(true);
    const onRemoved = id => id === tabId && done(false);
    chrome.tabs.onUpdated.addListener(onUpdated);
    chrome.tabs.onRemoved.addListener(onRemoved);
    function done(ok) {
      chrome.tabs.onUpdated.removeListener(onUpdated);
      chrome.tabs.onRemoved.removeListener(onRemoved);
      (ok ? resolve : reject)();
    }
  });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize a singular ng-model for efficiently filtering and presenting filtered data

Recently, I encountered an issue with a HTML select element that is used to sort a list. The code for the select element looks like this: <select ng-init="sortMethod=sortMethods[0]" ng-model="sortMethod"> <option ng-repeat="sortMethod in sortMe ...

The AJAX session is triggered twice, without displaying an alert the second time

Upon loading the page, an AJAX session is triggered and then again after clicking. Strangely, the readystate change is not happening the second time around. To troubleshoot, I added an alert box in the function which appears during page load but not on cli ...

In React, CSS @media queries are specifically designed to function only within the Device Mode of Developer Tools

As indicated by the title, I have designed a responsive web app using the React framework along with various @media queries. When I resize the page in Developer Tools' Device Mode, the queries work perfectly fine and everything functions as expected. ...

Exploring deep within JSON data using jQuery or Javascript

I have a substantial JSON file with nested data that I utilize to populate a treeview. My goal is to search through this treeview's data using text input and retrieve all matching nodes along with their parent nodes to maintain the structure of the tr ...

Transferring the values of JavaScript objects to HTML as strings

My goal is to generate HTML elements based on the values of specific JavaScript objects that are not global variables. However, when attempting to execute the code below, I encounter an error stating "params is not defined." What I actually aim to achieve ...

What steps are needed to set up my Express server so that it can render all my content, rather than just my HTML file?

I need help setting up a server for my project using Express. Here is the structure of my file directory: root-directory ├── public │ ├── css │ │ └── styles.css │ ├── images │ │ └── img1.png | | └ ...

Using Regular expressions in JavaScript to eliminate content between two HTML comment tags

I am currently dealing with two HTML comments in this format: <!--Delete--> Blah blah blah blah <!--Delete--> I need to remove these comments, along with any characters and newlines. I am utilizing JavaScript and Grunt for this replacement ta ...

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

Have you ever wondered about the distinction between offsetHeight, clientHeight, and scrollHeight? What about offsetWidth, clientWidth, and scrollWidth? Understanding these differences is crucial for working effectively on the client side. Without this kn ...

Using Sequelize to Create/Post Data with Many-to-Many Relationship

I've been exploring how to implement a M:N Association using Sequelize. After examining the documentation (doc), I came across a solution that closely matches my requirements: User.belongsToMany(Profile, { through: User_Profile }); Profile.belongsToMa ...

How to access a $scope variable in the same Angular controller function from outside the function

As a newcomer to AngularJS, I have a question about accessing my $scope variable from an outside function within the same controller. How can I achieve this? Below is the code snippet: .controller('RekapCtrl', ['$scope', '$timeout ...

Guess the Number Game with while Loop

I have a project where I need to limit guesses to 10, display the guessed number, and keep those results on the screen after each game without replacing the previous guesses. Each set of guesses should be numbered to show how many guesses have been made us ...

Experiencing difficulty incorporating JSON and JS into jQueryhandleRequestJSON and JS integration with jQuery

I'm having trouble fetching the 'sigla' field from a JSON file and inserting it into an HTML 'option object'. I could use some assistance with this issue, so if anyone out there can lend a hand, it would be much appreciated! Here ...

What is the best way to preserve the state of child components after being filtered by the parent component?

I've been working on a small application using create react app to enhance my skills in React, but I've hit a roadblock with managing the state. The application maps through JSON data in the parent component and displays 6 "image cards" as child ...

Switch up image origin when image reaches screen boundary

I am trying to create a DVD screensaver with changing images each time it hits the edge, but I can't seem to get it to work. I've attempted using the code snippet below: var img = document.getElementById("myImage"); img.src = 'img/new-image. ...

Unable to access the .env file in Vue.js when executing cross-env NODE_ENV=development webpack-dev-server --open --hot

I'm attempting to utilize an .env file for storing local variables, but I am encountering an issue where they appear as undefined when I try to log them. Here is a snippet from my .env file (located at the root of my project): VUE_APP_STRAPI_HOST=htt ...

Uh oh! You haven't set a QueryClient yet. Make sure to use QueryClientProvider to set

My first experience with React Query didn't go as planned when I encountered this error at the beginning of my React app: Even though I added QueryClientProvider to the top of my component tree, I kept getting: Error: No QueryClient set, use QueryCli ...

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

Tips for eliminating the undefined/null values from an array nested within another array in Angular

DATA = [{ application: [{ name: 'Room1' },{ name: 'Room2' },{ name: 'Room3' },{ name: 'Room4' },{ name: 'Room5' }], name: 'Batch 1&ap ...

Transform JSON data into a JavaScript object

There is a JSON string in a specific format: [{"A":"SomeStringData","B":1}, {"A":"SomeStringData","B":2}, ... ... ...] It should be noted that this JSON string passes through all online parsers successfully and is considered valid. An attempt is being ...

What is the process of emphasizing a WebElement in WebdriverIO?

Is there a way to highlight web elements that need to be interacted with or asserted in webdriverIO? Or is there a JavaScript code similar to the javascript executor in Selenium that can be used for this purpose? ...