When extension toolbar icon set via chrome.pageAction.setIcon() the icon reverted to default after tab reload (F5)
In the documentation it says:
If you want to create an icon that isn't always active, use a page
action instead of a browser action.
Which suggests that the icon supposed to be persistent..
Am I missing something?
Sample extension:
manifest.json
{
"background": {
"persistent": true,
"scripts": [ "background.js" ]
},
"browser_action": {},
"manifest_version": 2,
"name": "test",
"permissions": [ "tabs" ],
"version": "0.0.1"
}
background.js
chrome.tabs.getSelected( tab =>
{
chrome.browserAction.setIcon({
path: "data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A", //red square icon
tabId: tab.id
});
});
Related
What my code basically should perform:
Create a custom menu
When a text is selected on any webpage, right click and click on the new context menu
Opens a new tab (a specific url), wait till it fully loads, than puts the previously selected text into a textarea (there is only one on that page) and clicks ok button, to summarize the selected text
My background.js:
chrome.contextMenus.create({
id: "summarize",
title: "Summarize",
contexts: ["selection"]
});
chrome.contextMenus.onClicked.addListener(function (info, tab) {
if (info.menuItemId === "summarize") {
chrome.tabs.create({
url: "https://example.com/form"
}, function (tab) {
chrome.scripting.executeScript({
target: {
tabId: tab.id
},
files: ['action.js'],
});
});
}
});
My manifest.json:
{
"manifest_version": 3,
"name": "Quick Actions",
"description": "Quick Actions",
"version": "1.4.9",
"permissions": [
"activeTab",
"contextMenus",
"unlimitedStorage",
"<all_urls>"
],
"background": {
"service_worker": "background.js"
},
"browser_action": {
"default_title": "Summarize",
"default_popup": "popup.html"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_icon": "icon16.png"
}
}
The problem:
When the new tab opens, the code doesn't run at all.
I tried to debug it, but even the console.log() part didn't work. I also tried with onLoad, same result. It seems that nothing triggered on the new page.
I need to close a specific tab in Google Chrome.
The behaviour is that an extension open up URL after she loaded and this can't be avoid.
This doesn't work :
#manifest.json
{
"name": "Close Tab Helpx Adobe",
"description": "Close the url http://www.example.com",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"],
"persistent": false
}
},
"icons": {
"16": "close-tab-helpx-adobe-16.png",
"128": "close-tab-helpx-adobe-128.png"
},
"permissions": [
"tabs"
]
}
#background.js
chrome.tabs.onUpdated.addListener(function(tab) {
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab)
}
});
In developper mode, i can see Uncaught TypeError: Cannot read property 'onUpdated' of undefined
As you can see, i'm a beginner.
Do you know how to achieve this ?
EDIT:
I also tried :
#background.js
chrome.tabs.onActivated.addListener(function(activeInfo) {
chrome.tabs.get(activeInfo.tabId, function(tab){
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab);
}
});
});
chrome.tabs.getCurrent(function(tab){
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab);
}
});
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
if(tabs[0].url=="http://www.example.com") {
chrome.tabs.remove(tabs[0]);
}
});
The error is the same, only the property name change onActivated, getcurrent or query
Thanks to wOxxOm (and his patience), here is a code which do the job :
#manifest.json
{
"name": "Close Tab Helpx Adobe",
"description": "Close the url http://www.example.com",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "close-tab-helpx-adobe-16.png",
"128": "close-tab-helpx-adobe-128.png"
},
"permissions": [
"tabs"
]
}
#background.js
chrome.tabs.onCreated.addListener(function(tab) {
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab.id);
}
});
});
So, i have my answer.
To go further ...
Haibara Ai says "Please be aware chrome.tabs.onUpdated will also fired for iframes, if a page contains many iframes, each completed iframe will trigger the event though you have checked : https://stackoverflow.com/a/36818991/2241806"
background.js
(function () {
chrome.windows.onRemoved.removeListener();
chrome.windows.onRemoved.addListener(function (windowid) {
alert(0);
});
})()
manifest.json
{
"name": "Merge Windows1",
"version": "1.0.2",
"description": "Merges all of the browser's windows into the current window",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"permissions": [
"input", "http://*/*", "tabs"
],
"manifest_version": 2
}
When I opened the DevTools by click "background page" in Chrome Extensions, the code in background.js works and alert when close browser. Otherwise no alert box.
I'm looking to create a "new tab" extension like Panda or the Product Hunt Extension: the user can open a new tab with my website inside, with an hidden url.
I've generated my package with the awesome Extensionizr and here is my manifest.json :
manifest.json
{
"name": "My app",
"version": "0.0.1",
"manifest_version": 2,
"description": "My awesome app",
"homepage_url": "http://myapp.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": false
},
"permissions": [
"tabs",
"http://myapp.com/*"
]
}
My background.js come from this answer, the problem seems really similar.
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
var newURL = "http://myapp.com";
chrome.tabs.create({ url: newURL });
});
I'm still getting this error when I try to run the background page from the extension settings : Uncaught TypeError: Cannot read property 'onClicked' of undefined
And when I open a new tab, Google Chrome took the advantage and display me a google search page.
I do it wrong, and I don't know how/where/why
You're completely off-track. You don't want to open a (simple) new tab, you want to replace the "New Tab page".
Daniel's answer correctly explains why your code does not work, but it won't do what you wanted.
To replace Chrome's New Tab page, you need to use Override Pages:
"chrome_url_overrides" : {
"newtab": "myPage.html"
},
Inside that myPage.html, you can add an <iframe> for your remote content.
That's because you need to register the browser action in the manifest. Here is your manifest with the browser action added at the bottom.
{
"name": "My app",
"version": "0.0.1",
"manifest_version": 2,
"description": "My awesome app",
"homepage_url": "http://myapp.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": false
},
"permissions": [
"tabs",
"http://myapp.com/*"
],
"browser_action": {}
}
Here are the browser action docs: https://developer.chrome.com/extensions/browserAction
I need to create a simple chrome extension which when clicked have to navigate to that website.I have been searching long.But I couldn't find out.Please help me.
Here is my manifest.json file
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version":2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background_page": "background.html",
"permissions": [
"tabs"
]
}
this is my background.html
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
</script>
I am just trying to navigate into my site.But it is not working.Anyone please help me.I only have these two files in my directory and an image icon_128.png.Please help me
background_page is no longer supported in manifest_version 2. Instead use the new format. You can also remove the tabs permissions value since chrome.tabs.create doesn't require it.
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"scripts": ["background.js"]
}
}
Move background.html to background.js, and remove the <script></script> tags.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
});
Maybe it is because you are missing theclosibg }) in your background page.
Besides, you don't need any permissions for what you want and it is recommended to use anon-persistent background page (a.k.a. event page).
E.g.:
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({ "url": "http://calpinemate.com" });
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"description": "...",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension"
"default_icon": "icon_128.png"
}
}
BTW, since you seem to be interested in changing the extension icon, you can take a look into chrome.browserAction.setIcon().
Below is an example that toggles the extension icon when the user clicks on the browser-action (you can adapt it according to your specific needs).
background.js:
var icons = ["red.png", "green.png"];
chrome.browserAction.onClicked.addListener(function(tab) {
var iconIdx = localStorage.getItem("iconIdx");
var newIdx = iconIdx ? (parseInt(iconIdx) + 1) % 2 : 1;
chrome.browserAction.setIcon({ path: icons[newIdx] });
localStorage.setItem("iconIdx", newIdx);
});