I have created a chrome extension that has a popup.js, background.js, content.js files (amongst others).
When I do some kind of hot key on the main browser page, I want to refocus/switch to my popup window.
I have tried a number of things. I am not sure where to put this.
I am using Chrome manifest v2.
I have the following in my manifest.json:
"commands": {
"popupWindow" : {
"suggested_key": {
"default": "Ctrl+Shift+P"
},
"description": "Switch to popup window"
}
}
I have the following in my background.js:
// Catch commands on the content page in the background script
chrome.commands.onCommand.addListener(function (command) {
if (command === "_execute_page_action") {
console.log("execute_browser_action");
} else if (command === "popupWindow") {
console.log("popupWindow");
}
});
At the moment, it's just a log. I have tried getting the id of the popup window, but I can't seem to.
Any help greatly appreciated.
You don't need anything in your background.js for this to work. Modify your manifest.json file to this:
{
...
...
"commands": {
"_execute_page_action" : {
"suggested_key": {
"default": "Ctrl+Shift+P",
"mac": "MacCtrl+Shift+F"
},
"description": "Switch to popup window"
}
...
}
You can get rid of the listener in background.js.
Related
This question is about a Chrome Extension for the Apps Script code editor.
I've tried getting the scrollbar elements by className, but without success. When I use the developer tools, to inspect the HTML in the Apps Script editor, I'm finding a name of scrollbar-thumb. I assumed it was a className, but when I use getElementsByClassName() the code returns zero elements.
I changed the color of the scroll bars from the developer tools to a magenta color, and it worked.
manifest.json
{
"name": "Apps Script Scrollbar Color",
"description": "This extension changes the scrollbar color",
"version": "1.0",
"browser_action": {
"default_icon": "myIcon.png",
"default_popup": "pop_up.html"
},
"content_scripts": [
{
"matches": ["https://script.google.com/*"],
"all_frames": true,
"js": ["pop_up.js"]
}
],
"permissions": [
"activeTab"
],
"manifest_version": 2
}
Pop-up.js
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function(e) {
//console.log('it ran');
var scrollBarElements = document.getElementsByClassName('scrollbar-thumb');
console.log('scrollBarElements.length: ' + scrollBarElements.length);
}, false);
});
Dev Tools Screen:
How can I get the scrollbar elements?
I can get the elements of the pop_up.html file, but I can't reference any HTML in the window itself.
Can't select those pseudo-elements directly with JS or in the dev console.
No document.getPseudoElementByName() exists, so a function needs called to ultimately control the styling.
in dev console:
function changeColor() { document.styleSheets[1].addRule("::-webkit-scrollbar-thumb", "background-color: pink;") }; >> enter
taken from this post
then run with changeColor() >> enter
Maybe include the [html] and [css] tags to see if anything different is offered from those groups
I'm trying to create my first Chrome extension.
It's basically an adblocker for specific elements, in this case - the Facebook comments section.
It works with the all_urls but not with that specific domain.
Manifest file:
{
"name": "My extension",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://visir.is/*"], //where your script should be injected
"css": ["style.css"] //the name of the file to be injected
}
]
}
style.css file:
.fbcomment {
display: none;
}
Any ideas how to correct "matches"?
I have tried *://visir.is/* as specified in https://developer.chrome.com/extensions/match_patterns but it only works with all_urls
Viktor,
You are on the wrong way. Your extension should work on Facebook site, and so the matches statement in the manifest must be exactly as the following:
"matches": ["https://www.facebook.com/*"]
Than you need to find all the comments in the timeline (most probably by css class), detect the presence of the target site address (//visir.is/) and then hide these comments.
Because the timeline dynamically load more posts you will also need to observe the new nodes and apply your function on them too (see the example from my Chrome extension below):
var obs = new MutationObserver(function (mutations, observer) {
for (var i = 0; i < mutations[0].addedNodes.length; i++) {
if (mutations[0].addedNodes[i].nodeType == 1) {
$(mutations[0].addedNodes[i]).find(".userContentWrapper").each(function () {
injectFBMButton($(this));
});
}
}
injectMainButton();
});
obs.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false });
I created a simple extension that toggles between the current and the last focused tab. Toggling can be either done by ALT+Q or by clicking on the button in the extension icon bar. There is just one problem. The extension seems to forget about the last focused tab after a certain time spent on the current tab. That is, I cannot toggle back to the last focused tab anymore.
Can anyone please give me an explanation why my extension forgets about the last focused tab?
// manifest.json
{
"background": {
"scripts": ["background.js"],
"persistent": false
},
"name": "Toggle Switch Recent Last Tabs",
"version": "1.1",
"manifest_version": 2,
"description": "Toggle between your current and last used (focused) tab with a keyboard shortcut (ALT+Q by default) or mouse click on the icon.",
"browser_action": {
"default_title": "",
"default_icon": "icon.png"
},
"commands": {
"toggle": {
"suggested_key": {
"default": "Alt+Q"
},
"description": "Toggle tabs"
}
},
"permissions": [
"tabs",
"http://*/",
"https://*/*"
],
"icons": {
"16": "icon_16.png",
"32": "icon_32.png",
"48": "icon_48.png",
"128": "icon_48.png"
}
}
And background.js:
// background.js
var previousTab;
var currentTab;
// General functions
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.update(previousTab, {selected: true});
});
chrome.tabs.onSelectionChanged.addListener(function(tab) {
if (previousTab == null) {
previousTab = tab;
}
if (currentTab == null) {
currentTab = tab;
}
else {
previousTab = currentTab;
currentTab = tab;
}
});
// Keyboard shortcut toggle function
chrome.commands.onCommand.addListener(function(command) {
if (command == "toggle") {
chrome.tabs.getSelected(null, function(tab) {
previousTab = tab.id;
currentTab = null;
});
chrome.tabs.update(previousTab, {selected: true});
}
});
Download in Webstore
Complete source code
In short, you are loosing state. May be because your background page is not persistent (persistent: false in manifest.json).
This kind of page is called Event page, instead of background page, and for efficiency it unloads after few seconds of inactivity and reload when a event call it.
It's weird, I have to explain: first of all Chrome run this page only to register listeners. After that, the page is unloaded, loosing global variables, but Chrome remember the listeners. When a event call one of them, Chrome loads the whole Event page, global variables are created again with their initial value.
To fix it, first of all try to change persistent to true. If it works, it's best to go back to persistent: false and save your variables (previousTab, currentTab) in storage.
chrome.storage.local is faster and more efficient, but asynchronous. It worth spending some minutes to make it work!
How do I write a chrome extension such that every time a user clicks the icon, my script is run but no popup is opened? (I would look this up in the docs myself but for whatever reason they suddenly stopped working, 404ing every page, as I got to this point).
I'm assuming it's just setting up the manifest correctly. Here's what I have now:
{
"name": "My Extension",
"version": "0.1",
"description": "Does some simple stuff",
"browser_action": {
"popup" : "mine.html",
"default_icon": "logo.png"
},
"permissions": [
"notifications"
]
}
Remove popup from your browser_action section of the manifest and use background pages along with browser Action in the background script.
chrome.browserAction.onClicked.addListener(function(tab) { alert('icon clicked')});
First, if you don't want to show a popup, remove "popup" : "mine.html" from your manifest.json (shown in your question).
Your manifest.json will look something like this:
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "Does some simple stuff",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "logo .png"
},
"permissions": ["activeTab"]
}
Note that manifest_version must be there and it must be 2.
Note that the activeTab permission has been added.
Note that you can only do one thing when the browser action button is clicked: either you can show a popup, or you can execute a script, but you can't do both.
Second, to execute a script when the icon is clicked, place the code below in your background.js file (the filename is specified in your manifest.json):
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "testScript.js"});
});
Finally, testScript.js is where you should put the code you want to execute when the icon is clicked.
If you want to follow the manifest 3 then you should do:
chrome.action.onClicked.addListener(function (tab) {
console.log("Hello")
});
Further note that you will not see the Hello in normal console, to see the hello go to extensions menu and click on inspect views in front of the specific extension menu.
Instead of specifying a popup page, use the chrome.browserAction.onClicked API, documented here.
you need to add a background file.
but firstly ou need to add an attribute in manifest.json like,
"background":{
"scripts":["background.js"]
}
now name a file in your extension folder as background.js
there is a way of sending objects from background to your content scripts suppose your content script is named content.js then what you need to do is write this code snippet in background.js file
chrome.browserAction.onClicked.addListener(sendfunc);
function sendfunc(tab){
msg={txtt:"execute"};
chrome.tabs.sendMessage(tab.id,msg);
}
what the above code is doing is sending an object named msg to content page and this msg object has a property txtt which is equal to "execute".
what you need to do next is compare the values in content script as
chrome.runtime.onMessage.addListener(recievefunc);
function receivefunc(mssg,sender,sendResponse){
if(mssg.txtt==="execute"){
/*
your code of content script goes here
*/
}
}
now whenever you click the extension icon an object named msg is sent from background to content. the function "recievefunc()" will compare its txtt property with string "execute" if it matches your rest of the code will run.
note: msg,txtt,sendfunc,receivefunc,mssg all are variables and not chrome keywords so you can use anything you want.
hope it helps.
:)
In manifest 3 you might do it like this
// manifest.json
"background": {
"service_worker": "back.js"
},
// back.js
chrome.action.onClicked.addListener(tab => {
chrome.tabs.create({
url: 'index.html'
});
});
This was just what I needed but I should add this:
If all you need is a one-time event like when a user clicks on the extension's icon, then Background Pages is a waste of resources as it will run in the background ALL the time.
Use Event Pages instead:
"background": {
"scripts": ["script.js"],
"persistent": false
}
I'm trying to build a Chrome Extension that appears as an icon in the address bar which, when clicked, sets contenteditable=true on all elements on the page, and then when clicked again sets them back to contenteditable=false.
However, I'm falling at the first hurdle... The icon isn't even showing up in the address bar.
Here's my manifest file:
{
"name": "Caret",
"version": "1.0",
"description": "Allows you to edit the content on any webpage",
"page_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery.js", "caret.js"]
}
],
"permissions" : [
"tabs"
]
}
and here's the caret.js script:
chrome.browserAction.onClicked.addListener(function(Tab) {
$("*").attr("contenteditable",true);
});
This is my first attempt at an extension, so it's quite probably a newbie mistake, but I'd really appreciate any help or advice!
Ok, turns out I needed to use chrome.pageAction.show(tab.id);, which meant I needed to get the ID of the current tab, which is achieved with:
chrome.tabs.getSelected(null, function(tab) {
chrome.pageAction.show(tab.id);
});
BUT it turns out you can't use chrome.tabs within a content script, so I had to switch to using a background page instead.
This is no longer possible as of last release.
Chrome extension page action appearing outside of address bar
https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ
My answer to this other question gives the solution. FYI, the second code issue noted in that answer is also relevant to your code: You want the icon to appear for all pages, so you should use browser_action, not page_action. Either will work, but using a page action on every page goes against convention and makes for a less consistent end-user experience.
I had a similar problem, here are the steps I followed to solve it:
I altered my manifest.json to include the following:
{
"background": {
"scripts": ["background.js"],
"persistent":false
},
"page_action": {
"default_icon": "logo.png",
"default_title": "onhover title",
"default_popup": "popup.html"
}
}
Then I inserted the following code into my background script:
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when on website and has class
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'myurl', schemes: ['https', 'http'] },
css: [".cssClass"]
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
The documentation for this can be found here... https://developer.chrome.com/extensions/declarativeContent
I did this:
chrome.tabs.onUpdated.addListener(function(id, info, tab){
if (tab.url.toLowerCase().indexOf("contratado.me") > -1){
chrome.pageAction.show(tab.id);
}
});