I'm trying to publish my extension to the Chrome web store. Everything works fine when loaded as an unpacked extension in developer mode. However, when I preview changes after uploading my zip file and try to open the popup, the popup html page appears to be missing with the following error message instead:
Your file was not found It may have been moved or deleted.
ERR_FILE_NOT_FOUND
There is no error thrown in the console for the popup.
My manifest.json is as follows:
{
"name": "<name>",
"version": "0.13",
"description": "<description>",
"permissions": ["*://*/*", "identity", "activeTab", "tabs", "storage"],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"background": {
"scripts": ["dist/background/index.js"],
"persistent": true
},
"content_scripts": [],
"web_accessible_resources": ["dist/content_scripts/index.css"],
"browser_action": {
"default_popup": "dist/popup/popup.html",
"default_icon": {
"16": "images/icon_16.png",
"32": "images/icon_32.png",
"48": "images/icon_48.png",
"128": "images/icon_128.png"
}
},
"icons": {
"16": "images/icon_16.png",
"32": "images/icon_32.png",
"48": "images/icon_48.png",
"128": "images/icon_128.png"
},
"oauth2": {
"client_id": "<client_id>",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
]
},
"key": "<my_key>",
"manifest_version": 2
}
All of the files are in the right place relative to the manifest before compression.
Here are the contents of the popup.html file (popup.js mounts a React app on #root):
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css#7.1.1/themes/reset-min.css" integrity="sha256-JQ2nnTmybhOWSjfV3sa8mG0ZVhTCcORER4cyXc5HL10=" crossorigin="anonymous">
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div id="root"></div>
<script src="popup.js"></script>
</body>
</html>
I've looked at the Chrome docs but they are either sparse or outdated on this. Can anyone help?
Thanks
(Edit: also I previously uploaded the zip while having forgotten to move the popup.html to the dist/popup folder so that the file was in fact missing, in case that's relevant)
It seems that I made a mistake between uploading this new version and a previous version. When looking at the Chrome profile in ~/.config/google-chrome/Default/Extensions/<extension_id> (on Linux) I realised that the last published version was 0.11 which had the popup.html file missing, I had thought that a newer version had been published between (0.12) to fix this but I see that it wasn't.
Related
I am trying to run some JS code in a html file located in my extension's directory chrome-extension://<my_extension_id>/notice.html
I have tried using content scripts to inject the JS, 1st I tried the programmatically route by using chrome.tabs.executeScript. After that didn't work I tried to use the manifest to do it which also failed .
manifest.json:
{
"name": "Shield",
"version": "0.0.1",
"manifest_version": 2,
"description": "Shield",
"homepage_url": "https://example.com",
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"tabs",
"activeTab"
]
}
notice.html:
<html>
<head>
<title>this page</title>
</head>
<body>
<h1>test page!!!</h1>
<p id="ref_test"></p>
</body>
</html>
notice.js:
alert("notice js injected");
I would like to run the content script or some how run JS (notice.js) on the url chrome-extension://<my_extension_id>/notice.html, However it normally just does not inject
Based on the example from MDN, I've created my own extension that showing just a 'hi' message. I've included a file named "popup.js" via tag. But this file is not getting executed.
This is my manifest.json file:
{
"manifest_version": 2,
"name": "Ext",
"version": "1.0",
"description": "Shows a hi message.",
"icons": {
"48": "icons/ff.jpg"
},
"permissions": ["tabs"],
"browser_action": {
"default_icon": "icons/toggle-off.png",
"default_title": "EXT",
"default_popup": "popup/popup.html"
}
}
This is my popup.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Hi</h2>
<script src="popup.js"></script>
</body>
</html>
There is only a single line in my popup.js file. That is,
console.warn("This is a warning");
But I can't see anything in the console. The pop-up is showing properly when I click on the extension icon.
I don't know what am missing here. Any help is appreciated!
Finally, I find out what was the issue.
To execute the code from the js file included via tag you need to specify that code in browser.tabs.executeScript and there is an error in my manifest.json file. I should specify the permission as activeTab instead of tabs.
So my modified manifest.json file is:
{
"manifest_version": 2,
"name": "Ext",
"version": "1.0",
"description": "Shows a hi message.",
"icons": {
"48": "icons/ff.jpg"
},
"permissions": ["activeTab"],
"browser_action": {
"default_icon": "icons/toggle-off.png",
"default_title": "EXT",
"default_popup": "popup/popup.html"
}
}
and my popup.js file becomes:
browser.tabs.executeScript({code: `console.warn("This is a warning")`});
See the docs for more details.
I want my Chrome Extension to load Javascript once user visits a website. But currently, the Javascript is executed only when user click the extension icon and till the extension popup is open.
I saw the answer in this Chrome extension to load the script without clicking on icon question.
My manifest.json is:
{
"manifest_version": 2,
"name": "Javascript example",
"description": "Some description.",
"version": "1.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
],
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["popup.js"]
}
]
}
The popup.js is:
document.addEventListener('DOMContentLoaded', () => {
alert("Working");
});
popup.html is:
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
The alert dialog is shown only when I click the extension icon (i.e. when popup.html is run), not when a page loads. I want the popup.js file to execute without user needing to click the extension icon. What am I missing?
Your manifest works, but run_at defaults to document_idle which means that DOMContentLoaded has already fired. This can be fixed by specifying run_at to document_start instead.
{
"manifest_version": 2,
"name": "Javascript example",
"description": "Some description.",
"version": "1.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
],
"content_scripts": [
{
"matches": ["*://*/*"],
"run_at": "document_start",
"js": ["popup.js"]
}
]
}
Source: https://developer.chrome.com/extensions/content_scripts
You need the content script.
Content scripts are JavaScript files that run in the context of web
pages. By using the standard Document Object Model (DOM), they can
read details of the web pages the browser visits, or make changes to
them.
Here are some examples of what content scripts can do:
Find unlinked URLs in web pages and convert them into hyperlinks
Increase the font size to make text more legible
Find and process microformat data in the DOM
If your content script's code should always be injected, register it in the extension manifest using the content_scripts field, as in the following example.
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
...
}
Refer this link for more information & implementation.
You can use content script that runs in the context of the page and this way you'll know when the user visits a specific site: https://developer.chrome.com/extensions/content_scripts
i am making a very simple exstension, when you click it, it is supposed to open a new tab, and send the user away to www.simplewebstats.com like this:
http://simplewebstats.com/process.php?domain="Domain the user is browsing"
So if he is browsing google.com, he is supposed to get sendt as
http://simplewebstats.com/process.php?domain=google.com
Here is what i have
Manifest.json
{
"background_page": "background.html",
"browser_action": {
"default_icon": "icon.png"
},
"description": "A free SEO tool for webmasters to track and display web data from most websites. ",
"name": "SimpleWebStats Site Report",
"permissions": [ "tabs", "http://www.simplewebstats.com/" ],
"version": "1.2",
"manifest_version": 2
}
background.html
<script src="js.js"></script>
js.js
chrome.browserAction.onClicked.addListener(function(tab){
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.create({url:"http://www.simplewebstats.com/process.php?ref=plugins&processType=add&domain="+tab.url.match(/:\/\/(.[^/]+)/)[1]});
});
});
Your define the background.html page in an older version of manifest.json (lower then 1)
The newer version is:
"background": {
"page": "background.html"
},
Then again - you can only define a background script (no need for the html):
"background": {
"scripts": ["background.js"]
},
What am I doing wrong? I want to run a function when clicking "Show me some foo".
manifest.json browser_action
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div class="changes">
<span class="reset">Show me some foo
</span>
</div>
</body>
</html>
popup.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{file:"reset.js"});
});
reset.js
var el = document.getElementById('foo');
el.onclick = showFoo;
function showFoo() {
alert('I am foo!');
return false;
}
Full manifest.json file
{
"name": "App name",
"version": "1.0.2",
"manifest_version": 2,
"description": "Desc.",
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": "img/icon.png"
},
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["js/myscript.js"],
"exclude_matches":[
"http://site.com/*"
]
}
],
"web_accessible_resources": [
"chrome_ex_oauth.html"
]
}
I'm not sure what you are trying to do, but I'll explain your code to you:
user clicks a browserAction
popup window is crated and scripts from popup.html are loaded
popup.js loads and registers a listener chrome.browserAction.onClicked.addListener
user closes a popup window (by clicking anywhere outside it or on the browserAction again)
pupup.html page is unloaded
chrome.browserAction.onClicked.addListener listener is unregistered
As you can see reset.js is never loaded as it's never injected. What's more, you can't have a popup.html and chrome.browserAction.onClicked.addListener in the same extension ("This event will not fire if the browser action has a popup." source).
You probably want to put chrome.browserAction.onClicked.addListener into the background page so that reset.js is injected to current page whenever browserAction is clicked. And, as I mentioned above, for chrome.browserAction.onClicked.addListener to fire, you need to get rid of "default_popup": "popup.html" from manifest.
If you wanted to inject a script to popup.html - it doesn't make much sense. You have full control over popup.html and you can simply put reset.js in the <head>.