Inside of my Chrome extension's content script, I'm trying to modify the favicon of the site to (temporarily) set it to my extension's icon. I can't figure out the correct way to reference the extension's icons from within the content script, however. I've tried:
favicon.href ='/images/icon-38.png';
console.log("set href of favicon to " +favicon.href);
But the value of favicon.href ends up relative to whatever site I'm on, for example: set href of favicon to https://twitter.com/images/icon-38.png
From my manifest.json:
"icons": {
"16": "images/icon-16.png",
"38": "images/icon-38.png"
},
Within my background script, I can of course refer to my icons with their relative path... but how do I do it from the content script?
You need to specify the icons as web_accessible_resources:
"icons": {
"16": "images/icon-16.png",
"38": "images/icon-38.png"
},
"web_accessible_resources": [
"images/icon-16.png",
"images/icon-38.png"
],
And then use chrome.runtime.getURL (chrome.extension.getURL is deprecated since Chrome 58)
chrome.runtime.getURL('images/icon-16.png');
chrome.runtime.getURL('images/icon-38.png');
This should work for you
chrome.extension.getURL('images/icon-38.png')
Related
I'm trying to make a chrome theme that has both stylistic features (in the manifest "theme" element) and a content script (in "content-scripts" element). I've encountered a strange error where the content script only runs when there is no "theme" element.
My content-script.js is just-
console.log("content-script.js");
When I format my manifest.json file like this with no "theme" element it works-
{
"manifest_version": 2,
"name": "Test",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"]
}
]
}
But when I add even an empty theme element my content script does not run-
{
"manifest_version": 2,
"name": "Test",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"]
}
],
"theme": {}
}
Anyone know why this happens, and how I can fix it?
You cannot. In Chrome, themes and extensions are two different things.
A theme is a special kind of extension that changes the way the browser looks. Themes are packaged like regular extensions, but they don't contain JavaScript or HTML code.
That's why when you include the "theme" field in your manifest.json, your extension can't run any content scripts.
I'd recommend you check the Regular Extension Documentation and also the Theme Documentation to see differences between each of them.
For Firefox, though, there is a theme API available.
I've created a simple extension but the icon is not being displayed in the browser's toolbar and in fact I see many other extensions installed but not their icon in the toolbar. What element in the manifest file defines that an icon should display an icon in the toolbar?
Here is the used manifest file and this manifest does not add any icon to the toolbar
{
// Extension ID: my_id
"key": ".....my key.......",
"name": "....any name....",
"version": "1.0",
"manifest_version": 2,
"description": "description",
"app": {
"launch": {
"local_path": "main.html"
}
},
"icons": {
"128": "icon-128.png"
},
"permissions": [
"...."
]
}
I ran into this exact same problem and found this question on the top search results. The answer I needed is in the comment by wOxxOm on this question so in case it helps, I'm promoting it to an answer:
The icon is available by default but it may not be visible due to the toolbar width made available to icons. You can edit this by clicking on the "puzzle piece" in the extension toolbar and then picking on the "pushpin" next to the extension you want to be made visible.
Hope this helps other people who are confused by this.
Sometimes, although adding icons in manifest.json, you cannot view icon on the toolbar. Because you need a browser action.
You can try adding in this manifest.json;
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
Also, you should generated .html file and .png image
In Brief,
Chrome extension include third parts.
Background script
Content script
Browser action(popup)
If you want see icon on toolbar, you should set a browser action in manifest.json
I have a browserAction extension testing on chrome 31.0.1650.57. I want to get active tab url when the user click on the extension icon, save it and use it later.
I am able to do that when using tabs permission. But this permission has a lot of power (that I don't need) and users are complaining about this.
I followed the article to switch to activeTab permission http://developer.chrome.com/extensions/activeTab but it only works when there is no popup. As you can see in the make_page_red example.
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("★ tab.url", tab.url);
});
You can check by changing the make_page_red example manifest file to add a default popup like this:
{
"name": "Page Redder",
"description": "Make the current page red",
"version": "2.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Make this page red",
"default_popup": "popup.html" ←-------------------
},
"manifest_version": 2
}
Now because I have a default popup the browserAction.onClicked listener is not called anymore.
How can I get current tab url and still have my popup opening?
Thanks
browserAction.onClicked is not called anymore (as you noted), so just skip that:
popup.js:
chrome.tabs.query({active:true,currentWindow:true},function(tabArray){
console.log(tabArray[0].url);
});
And of course, have popup.html load popup.js with a script tag. (And I'm not sure what you're background script is doing.)
Edit:
In addition to the above, my extension has two other files. manifest.json is copied from yours, but has the background section deleted. The only other file is popup.html (from memory, so bear with me):
<html><body><script type="text/javascript" src="popup.js"></script></body></html>
To view the console, I click the browser action, which brings up a 50 pixel square window. Right click on that, "inspect element", and click console to view the url.
I am trying to understand chrome background pages. I managed to get background.js script running after cannibalizing on the of examples and it pops up with an alert box every time a user visits a page. However, when I take the same script and move it to a background.html file, I cannot seem to get the file to execute.
I have updated the the manifest file to a page (instead of script) and the extension loads fine. I have also tried playing around with either having the javascript in a script tag directly in the body or in a function as it is now that is called onload on the body or in the head.
Perhaps I don't understand the concept of what a background.html page is used for in a Chrome extension?
Manifest file:
{
"name": "Testing Extension",
"version": "0.2",
"background": { "pages": ["background.html"] },
"permissions": [
"tabs", "https://mail.google.com/*", "http://*/*, https://*/*"
],
"browser_action": {
"name": "Do some action",
"icons": ["icon.png"]
},
"manifest_version": 2,
"web_accessible_resources": ["injectImage.js", "background.html"]
}
injectImage.js
alert('Got Here');
'use strict';
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript(null, {file: "injectImage.js"});
});
chrome.browserAction.setBadgeBackgroundColor({color: [0, 200, 0, 100]});
var i = 0;
window.setInterval(function () {
chrome.browserAction.setBadgeText({text: String(i)});
i++;
}, 10);
background.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.0.min.js"></script>
<script src="injectImage.js"></script>
</head>
<body>
</body>
</html>
currently this code doesn't seem to do anything other than put an icon in the top right corner.
Your background is only one page and acts like a local server that can send and receive data between the content_scripts and default_popup or other extension pages.
For anyone starting out, look at each example's manifest version, which is defined in manifest.json. Version 2 has stricter security policies and inline javascript is invalid so copying sample v1 code and pasting it into background.html will not work anymore. All scripts need to be in an external file that can be included in an HTML file using the src attribute like <script src="main.js"></script>
My understanding is that you have four commonly used components for a basic extension:
DOM of the tab being viewed which can only be accessed by content_scripts
content_scripts is an array of javascript files identified in manifest.json that are sequentially injected directly into the tab's DOM. Apparently the JS variables and functions from the tab and your content_scripts cannot interact.
One background HTML page which Chrome either generates by concatenating an array of scripts OR is defined as one page, commonly named background.html.
{"browser_action" : {"default_popup" : "popup.html"}} is an optional user interface defined in manifest.json that is displayed when someone clicks your extension icon. The popup has no way to reach the tab's DOM so if the tab's content matters then it must be requested using Chrome messages like chrome.extension.sendMessage
Your background is defined either as one or more scripts:
"background": {
"scripts": ["background.js"]
},
Or as a page:
"background": {
"page": "background.html"
},
If you want to find out what is happening inside of the background then you can use console.log but in order to inspect the output you have to launch the inspector from the Extensions page. You can even see that the background file is always named "_generated_background_page.html".
You have a typo in your manifest file. Including a background page should look like this:
"background": {"page": "background.html"}
OR you can directly define js instead of defining a background page and referencing a script file in it (Inline scripts are not allowed as per Content Security Policy (CSP))
"background": {
"scripts": ["background.js"]
},
For version 3
background pages are replaced by service_workers in MV3
Replace background.page or background.scripts with background.service_worker in manifest.json.
{
"manifest_version": 3,
"name": "",
"background": {
"service_worker": "background.js"
}
}
One more gotcha not mentioned here. Doing <script src="myscript"/> doesn't work :P, you have to type it out completely with <script src="myscript"></script>. Took me a bit to figure that out.
so I am developing a google chrome extension for my chromebook. The idea is to make a "magnifying" type of effect wherever the mouse goes on the current webpage in order to zoom in on text/images or whatever the mouse hovers.
I have the code for this effect working on a webpage, it does exactly what I want.
Where I'm confused is how to integrate this to a chrome extension. I would want an extension like button to show up in the upper right corner of the chrome browser and then you can click it and then a "box or magnifying glass" would appear and then you could click and drag it around the page. The box would go away if you clicked the extension button again.
This is what I know after a bit of online searching...
- I need a manifest.json file, my current file looks like this...
{
"name": "magnify",
"version": "1.0",
"description": "This will magnify an area where the mouse hovers",
"browser_action": {
"popup": "popup.html",
"default_icon": "magnify.png"
},
"content_scripts": [{
"matches": ["http://*/*"],
"css": ["magnify.css"],
"js": ["magnify.js"],
"run_at": "document_end",
"all_frames": true
}],
"background_page": "background.html"
}
I've tried a few different things, but i'm sure I have a few things that I don't need.
Also you can go to http://www.supertecho.com/background.html in order to see what the current code is for my magnification idea.
I have a popup.html file but I'm not sure if the popup.html or the background.html code would be more necessary or not (or maybe both is needed).
Let me know if I am unclear about things and I will clarify!
Thanks a lot in advance :-)
The magnifying effect code should be a content script, running in the DOM of the browsed pages (effectively injected into each page). See http://code.google.com/chrome/extensions/content_scripts.html