I'm kind of a newbie. I made a Firefox WebExtension add-on. It is very simple. The add-on changes words on the visited websites.
It has a manifest file that declares a content script.
My question is: How can I add a Browser UI button to the add-on?
Ultimately, my intent is to have the button allow the user to choose between seeing the website as delivered, or as modified by the the WebExtension. However, right now I'm just stuck on adding the button.
This is my manifest.json:
{
"manifest_version": 2,
"name": "Gordo",
"version": "1.0",
"description": "XXXXXX",
"icons": {
"48": "icons/img.png"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["background.js"]
}
]
}
WebExtensions can add a browser UI button as either a Browser Action and/or a Page Action. You can have a maximum of one of each. For each, you can either have a button which code in your background script responds to (receives a click event), or the browser with show an HTML file you provide as a popup. You can set a default as to showing a popup, or getting a click. You can dynamically switch between the two by using setPopup() (setting to '' causes the click to fire; any other string and the referenced HTML file is used as the popup which is shown without triggering a click event).
Browser Action
You can add a button to the browser user interface by adding a browser_action key to your manifest.json:
"browser_action": {
"default_icon": "myIcon.png",
"default_title": "Do my thing",
"browser_style": true
}
You can then add a listener in your background script. However, you first have to have a background script. You can have one by adding a background key to your manifest.json:
"background": {
"scripts": [
"background.js"
]
}
Then, in background.js you can add a listener for the button click by using browserAction.onClicked.addListener():
chrome.browserAction.onClicked.addListener(function(tab) {
//Do what you want to do when the browser UI button is clicked.
});
Page Action
Alternately, instead of using a browser action, you can use a page action. The keys in the manifest.json and usage in your background script are very similar:
In your manifest.json use page_action:
"page_action": {
"default_icon": "myIcon.png",
"default_title": "Do my thing",
"browser_style": true
}
Then, in background.js you can add a listener for the button click by using pageAction.onClicked.addListener()
chrome.pageAction.onClicked.addListener(function(tab) {
//Do what you want to do when the browser UI button is clicked.
});
MDN says the following about page actions:
Page actions are like browser actions, except that they are associated with particular web pages rather than with the browser as a whole. If an action is only relevant on certain pages, then you should use a page action and display it only on relevant pages. If an action is relevant to all pages or to the browser itself, use a browser action.
While browser actions are displayed by default, page actions are hidden by default. They can be shown for a particular tab by calling pageAction.show(), passing in the tab's ID.
Showing a popup
You can have the default be to show a popup by adding a default_popup key to either the browser_action key, or the page_action key. The above browser_action could look like the following with a popup:
"browser_action": {
"default_icon": "myIcon.png",
"default_title": "Do my thing",
"browser_style": true
"default_popup": "myPopup.html"
}
Related
I just started out with Google Chrome extensions and I can't seem to log to console from my background js. When an error occurs (because of a syntax error, for example), I can't find any error messages either.
My manifest file:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"pageCapture",
"tabs"
]
}
background.js:
alert("here");
console.log("Hello, world!")
When I load the extension, the alert comes up but I don't see anything being logged to console. What am I doing wrong?
You're looking at the wrong place. These console messages do not appear in the web page, but in the invisible background page (ManifestV2) or service worker (ManifestV3).
To view the correct console open devtools for the background script's context:
Visit chrome://extensions/ or right-click the extension icon and select "Manage extensions".
Enable developer mode
Click on the link named background page (ManifestV2) or service worker (ManifestV3).
Screenshot for ManifestV2 extensions:
Screenshot for ManifestV3 extensions:
I had the same problem, in my case the logging was set to "Hide all" in the console tab in Chrome Developer tools.
I had not even realised this was an option, and I can't remember turning it off
For followers who wish to see the debug console for a "content script" of their chrome extension, it is available by doing a normal "show developer console" then use the dropdown arrow to selects its "javascript environment" then you'll have access to its methods, etc.
additionally
if you want to see content_script js file ( when "background" property is not set ) in manifest.json
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["popup.js"],
}]
"browser_action": {
"default_icon": "icon_32.png",
"default_popup": "popup.html"
}
then right click on extension icon and click on Inspect popup and developer window opens with popup.html opened , there you see console tab.
Similar to the answer of Michiel i also had a funny console configuration: A filter i dont remember setting:
After clearing the filter i saw the messages.
I had this problem as well. It seems as though my webpage was not updating to the newly saved script. This was solved by pressing Ctrl + refresh (or Ctrl + F5) in the chrome browser.
If we want to read messages printed to console from the popup page, we can click the extension icon to open the popup page, then do right click on the popup page anywhere, a dropdown menu will display, we just click "Inspect" menu to open the developer tool. Notice that the popup page must be keep opening. If it is closed(by window.close()), the developer tool will be closed too.
The other answer(s) work(s) for background.js but, if you are looking for console.logs from the popup then you can try:
var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');
I was developing using cra, and this worked for me.
For those developing extensions for Firefox:
TL;DR version: you need to use Ctrl+Shift+J to call up the browser console window, and click on the settings icon on the top right-hand corner and make sure that "Show Content Messages" is checked.
Longer explanation from a related stackoverflow question: How do I see the console.log output of a background script in a Firefox WebExtension?
I just started out with Google Chrome extensions and I can't seem to log to console from my background js. When an error occurs (because of a syntax error, for example), I can't find any error messages either.
My manifest file:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"pageCapture",
"tabs"
]
}
background.js:
alert("here");
console.log("Hello, world!")
When I load the extension, the alert comes up but I don't see anything being logged to console. What am I doing wrong?
You're looking at the wrong place. These console messages do not appear in the web page, but in the invisible background page (ManifestV2) or service worker (ManifestV3).
To view the correct console open devtools for the background script's context:
Visit chrome://extensions/ or right-click the extension icon and select "Manage extensions".
Enable developer mode
Click on the link named background page (ManifestV2) or service worker (ManifestV3).
Screenshot for ManifestV2 extensions:
Screenshot for ManifestV3 extensions:
I had the same problem, in my case the logging was set to "Hide all" in the console tab in Chrome Developer tools.
I had not even realised this was an option, and I can't remember turning it off
For followers who wish to see the debug console for a "content script" of their chrome extension, it is available by doing a normal "show developer console" then use the dropdown arrow to selects its "javascript environment" then you'll have access to its methods, etc.
additionally
if you want to see content_script js file ( when "background" property is not set ) in manifest.json
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["popup.js"],
}]
"browser_action": {
"default_icon": "icon_32.png",
"default_popup": "popup.html"
}
then right click on extension icon and click on Inspect popup and developer window opens with popup.html opened , there you see console tab.
Similar to the answer of Michiel i also had a funny console configuration: A filter i dont remember setting:
After clearing the filter i saw the messages.
I had this problem as well. It seems as though my webpage was not updating to the newly saved script. This was solved by pressing Ctrl + refresh (or Ctrl + F5) in the chrome browser.
If we want to read messages printed to console from the popup page, we can click the extension icon to open the popup page, then do right click on the popup page anywhere, a dropdown menu will display, we just click "Inspect" menu to open the developer tool. Notice that the popup page must be keep opening. If it is closed(by window.close()), the developer tool will be closed too.
The other answer(s) work(s) for background.js but, if you are looking for console.logs from the popup then you can try:
var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');
I was developing using cra, and this worked for me.
For those developing extensions for Firefox:
TL;DR version: you need to use Ctrl+Shift+J to call up the browser console window, and click on the settings icon on the top right-hand corner and make sure that "Show Content Messages" is checked.
Longer explanation from a related stackoverflow question: How do I see the console.log output of a background script in a Firefox WebExtension?
I just started out with Google Chrome extensions and I can't seem to log to console from my background js. When an error occurs (because of a syntax error, for example), I can't find any error messages either.
My manifest file:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"pageCapture",
"tabs"
]
}
background.js:
alert("here");
console.log("Hello, world!")
When I load the extension, the alert comes up but I don't see anything being logged to console. What am I doing wrong?
You're looking at the wrong place. These console messages do not appear in the web page, but in the invisible background page (ManifestV2) or service worker (ManifestV3).
To view the correct console open devtools for the background script's context:
Visit chrome://extensions/ or right-click the extension icon and select "Manage extensions".
Enable developer mode
Click on the link named background page (ManifestV2) or service worker (ManifestV3).
Screenshot for ManifestV2 extensions:
Screenshot for ManifestV3 extensions:
I had the same problem, in my case the logging was set to "Hide all" in the console tab in Chrome Developer tools.
I had not even realised this was an option, and I can't remember turning it off
For followers who wish to see the debug console for a "content script" of their chrome extension, it is available by doing a normal "show developer console" then use the dropdown arrow to selects its "javascript environment" then you'll have access to its methods, etc.
additionally
if you want to see content_script js file ( when "background" property is not set ) in manifest.json
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["popup.js"],
}]
"browser_action": {
"default_icon": "icon_32.png",
"default_popup": "popup.html"
}
then right click on extension icon and click on Inspect popup and developer window opens with popup.html opened , there you see console tab.
Similar to the answer of Michiel i also had a funny console configuration: A filter i dont remember setting:
After clearing the filter i saw the messages.
I had this problem as well. It seems as though my webpage was not updating to the newly saved script. This was solved by pressing Ctrl + refresh (or Ctrl + F5) in the chrome browser.
If we want to read messages printed to console from the popup page, we can click the extension icon to open the popup page, then do right click on the popup page anywhere, a dropdown menu will display, we just click "Inspect" menu to open the developer tool. Notice that the popup page must be keep opening. If it is closed(by window.close()), the developer tool will be closed too.
The other answer(s) work(s) for background.js but, if you are looking for console.logs from the popup then you can try:
var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');
I was developing using cra, and this worked for me.
For those developing extensions for Firefox:
TL;DR version: you need to use Ctrl+Shift+J to call up the browser console window, and click on the settings icon on the top right-hand corner and make sure that "Show Content Messages" is checked.
Longer explanation from a related stackoverflow question: How do I see the console.log output of a background script in a Firefox WebExtension?
I'm starting out with Chrome Extensions.
My extension has 2 content_scripts which are executed on page load. I'd like to add an onClicked handler for my browser action from inside one of these JS files.
Basically what I want to do is chrome.browserAction.onClicked.addListener but I've read in a similar question that this only works inside of a popup html file. I'm not using a popup file because I don't currently need one, and I need my JS to run in the global scope (as it does without a default_popup).
Here's my manifest.json:
{
"manifest_version": 2,
"name": "Foo",
"description": "Foo description.",
"version": "0.0.0.1",
"permissions":[
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery1.9.1.min.js", "foo.js"]
}
]
}
Sorry but my googling skills couldn't find how to do this. Is there a way to attach an onClicked handler to my browser action or do I need an html popup for that?
Decided to just move my overly long comment to an answer.
If you have a popup defined then the onClicked event is never fired, but it works just fine without one. Just pop the handler into your background page and it should work just fine. Be aware that chrome.browserAction, as well as just about every other chrome.* API, cannot be accessed from a content script, so you will require the use of a background or event page.
In the following google chrome extension file why do i cannot use a jquery script inside myscript.js file,Is jquery not loaded inside myscript.js file, what changes should be done in manifest file to use jquery inside myscript.js
Manifest.json
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"background": { "scripts": ["jquery-1.9.1.min.js","myscript.js"] },
"permissions": [
"tabs", "http://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
myscript.js
alert($("#extension-command-list").val()); //undefined
alert($("#extension-command-list").html()); //undefined
$(document).ready(function() {
alert("hello world"); //not seen
});
EDIT:
"background": { "scripts": ["jquery-1.9.1.min.js"] },
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["myscript.js"] or "js": ["jquery-1.9.1.min.js","myscript.js"]
}
],
The reason you are getting undefined is becaus you are not specifying a background page.
So.. the background page Chrome generates, looks just like
<html>
<head></head>
<body>
<script src="jquery-1.9.1.min.js"></script>
<script src="myscript.js"></script>
</body>
</html>
As you see there isn't any Element which can be selected, thats why your first too alert's return undefined.
Anyway, the alert("hello world") should be shown too, as the DOMContentLoaded or similar should be fired any way.
Could it be that you want to select Elements of an site you are visiting ?
If so, you should put myscript.js in an Content Script instead of a background page.
There you get access to the DOM of the site.
So the question is, what are you up to ?
If you actually want to select Elements in your background page, you have to specify one,
Looking at the background pages site shows you, its as easy as:
{
"name": "My extension",
...
"background": {
"page": "background.html"
},
...
}
Edit:
"default_popup" : "popup.html"
Refers to a Browser Actions Popup. A browser Action is used
[...] to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.
So
If a browser action has a popup, the popup appears when the user clicks the icon. The popup can contain any HTML contents that you like, and it's automatically sized to fit its contents.
To add a popup to your browser action, create an HTML file with the popup's contents. Specify the HTML file in the default_popup field of browser_action in the manifest, or call the setPopup method.
"background":"{...}"
A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue.
As the architecture overview explains, the background page is an HTML page that runs in the extension process. It exists for the lifetime of your extension, and only one instance of it at a time is active.
Also has a background script access to all parts of the Chrome Extension's Api. chrome.* if you have requested the permissions respectively
Now lets say, you want to for example extend the ContextMenu of chrome with some functionalities.
To do this, you first have create a contextMenuEntry in the background page.
And just like your background page has only one instance of it running at a time, and that for the lifetime of the extension, so should your contextMenuEntry only have one instance of it, which gets created when your extension runs and remains for the lifetime of your extension.
Now assume you want to display the currently selected text of the page you are visiting in one of you Menu Entries.
To do that, you need access to the chrome.contextMenus API Method but a contentscript is not allowed to use this.
To get this to work you need to pass a message with the selected text to the background page through e.g. chrome.extension.sendMessage
In the background page you can then update your existing contextmenuentry to display the selected text.
sry i couldn't think of a better example right now