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'),
});
Related
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
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 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);
}
});