vue-cli-plugin-browser-extension
vue-cli-plugin-browser-extension copied to clipboard
Content Script is not loading
I am trying to use a content script but to no avail. I've used the boilerplate setup and I can see it being compiled, but no code gets executed in the content script.
I have also used alert and console.log
in the background script, to confirm the listener is working and it does. All that doesn't work, is executing script from a file. I even used it with some inline code, to see if executeScript
on it's own works, and it does...
Content script
console.log('Hello from the content-script')
alert('Hello from the content-script')
Background
browser.runtime.onMessage.addListener(
(message, callback) => {
browser.tabs.executeScript({
file: 'content-script.js',
});
},
);
Manifest
{
"manifest_version": 2,
"name": "Title",
"homepage_url": "https://example.com/",
"description": "Dscription",
"default_locale": "en",
"permissions": [
"tabs",
"activeTab",
"<all_urls>",
"*://*/*"
],
"icons": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
},
"background": {
"scripts": [
"js/background.js"
],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "Title",
"default_icon": {
"19": "icons/19.png",
"38": "icons/38.png"
}
}
}
Compiled result
There's been a bit of confusion around this, so I probably need to make the docs more clear around the boilerplate. The default setup should execute your content script when you click on the browser action button.
Most developers are expecting their content scripts to be automatically injected on every page, but given that requires special permissions when you publish the extension and it is my belief that if developers start with the most open permissions, they will not ever revisit and trim it down to only what is necessary.
If automatically injecting your content script is something you wanted to do, here's the chrome docs for what your manifest file needs to include: https://developer.chrome.com/extensions/content_scripts#declaratively
The default setup should execute your content script when you click on the browser action button.
@adambullmer Do you mean when pressing the extension button, so that the popup opens? Because if so, that also doesn't work. But perhaps I am misunderstanding what you mean. I've read over the docs and made permissions very open (as can be seen in my manifest), so I am not sure that's the cause here. I've tried all kinds of communications, but it never works
Dropping the following in the manifest.json
will seems to work.
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"js/content-script.js"
]
}
],
@doutatsu Did you solve this? I'm having the same issue.
for me my content script only loads sometimes(refresh the page a few times and you just might see it) other times its not there(no file (chrome dev tools) ) how can i fix this?
manifest.json:
"content_scripts": [ { "matches": ["<all_urls>"], "js": ["editer.js"] } ], "manifest_version": 3, "name": "chrome extension", "version": "0.1", "description": "idk", "author": "myrccar", "permissions": [ "*://*/*", "webNavigation", "tabs", "background", "contentscripts", "<all_urls>" ], "background": { "service_worker": "background.js" }, "action": { "default_title": "a popup", "default_popup": "popup.html" }
Same issue for me as @myrccar