I am trying to build a chrome extension. Want it to be always enabled.
I tried to do it in the following way:
chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({pageUrl: { urlContains: '*' },})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
But it doesn't seem to work correctly.
How to get this done?
If you just want your icon to be visible all the time, the standard way to do that is through the browser_action field in your manifest.json file:
{
"browser_action": {
"default_icon": {
"32": "images/icon32.png" // Chrome supports various icon sizes (in pixels)
},
"default_title": "Title", // The title that shows up when a user hovers on your icon
"default_popup": "popup.html" // The URL of your popup page
}
}
Presumably, it should be the same as whatever page_action entry you already have.
For more details, see: https://developer.chrome.com/extensions/browserAction
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 tried this : https://developer.chrome.com/extensions/options.html and made an option page.
So a selection has been added under my extension icon with the name of Option.
My question is that is there a way to rename Option and change it something like Setting or some words in other languages ?
The "Options" label at chrome://extensions is automatically adapted to the user's language. Extensions cannot change the value of this label.
The value of the "Options" option at the dropdown menu at the extension's button cannot be customized either, but you can create a new context menu item under the button as of Chrome 38. E.g.
chrome.contextMenus.create({
id: 'show-settings', // or any other name
title: 'Settings',
contexts: ['page_action', 'browser_action']
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == 'show-settings') {
chrome.tabs.create({
url: chrome.runtime.getURL('settings.html')
});
}
});
I suggest to just stick to "Options" though, because users do already know what the option does. Consistency in UI/UX is important, imagine how you productive you'd be if every application had a different way of (e.g.) closing/quiting the application.
manifest.json to test the previous script:
{
"name": "Contextmenu on browserAction button",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Right-click to see a context menu"
},
"permissions": [
"contextMenus"
]
}
Easier way to trigger events.
chrome.contextMenus.create({
title: 'GitHub',
contexts: ['page_action'],
onclick: () => console.log('GitHub'),
});
I'm trying to figure out how to write a simple Chrome extension which allows to transliterate web pages from one alphabet to another. Unfortunately Google's documentation on Chrome extensions is pretty much confusing for a beginner. I've seen a lot of similar questions here, f.ex. Replace text in website with Chrome content script extension, but still can't get it clear. In a trial run I'm trying to replace all "a"'s in the page with "Z"'s.
Here's my Manifest.json:
{
"name": "My Chrome extension",
"version": "0.1",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["myscript.js"]
}]
}
Myscript.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(
null, {code:"document.body.innerHTML = document.body.innerHTML.replace(new RegExp("a", "g"), "Z")"});
});
But this fails to work. If I include only one line into Myscript.js:
document.body.innerHTML = document.body.innerHTML.replace(new RegExp("a", "g"), "Z");
then all 'a' letters get replaced with 'Z' as soon as the page has loaded, but this is not my goal, as I want to get it working only after the extension button is pressed.
Any help will be much appreciated.
You've set up your extension to inject your code using a content script. A content script will get injected into any page that matches your matches field. What you want is to only inject the script if they click on your Browser action. For this you can either have a background page that listens for the chrome.browserAction.onClicked event and reacts to it. Or you can have a default page for your Browser Action that injects the code into the page and if your put window.close as part of the script this will stop any popup from occuring and allow you to avoid using a background page (Im big on avoiding using a background page when ever possible).
For an example of the first method, check out this sample....
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/
And here's an example of the second method (which is a modified version of the set_page_color sample)...
manifest.json
{
"name": "A browser action that changes the page color.",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "Set this page's color.",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
chrome.tabs.executeScript(null,{file:"injectedCode.js"});
window.close();
injectedCode.js
// This was just a quick look at changing text on a page
// there could be more tags you should ignore and there could be a better way of doing this all together
var ignoreTags = ["NOSCRIPT","SCRIPT","STYLE"];
var nodeIterator = document.createNodeIterator(
document,
NodeFilter.SHOW_TEXT,
function (node){
var parentTag = node.parentNode.tagName.toUpperCase();
if ( ignoreTags.indexOf(parentTag)==-1 ) {return true} else {return false};
},
false
);
var node;
while ( (node = nodeIterator.nextNode()) ) {
node.data = node.data.replace(/a/g, 'z');
}
NOTE
As Rob W points out in the comments chrome.tabs and chrome.browserAction are not usable in a content script which is why the chrome.browserAction.onClicked has to be used in a background page.
The code in myscript.js is what gets injected into the page. It doesn't work how you currently have it set up because you are automatically injecting into every page the code that injects in to select pages. You need to move the myscript.js code into a background_page which will then only inject when the button is clicked.
https://code.google.com/chrome/extensions/background_pages.html
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);
}
});