Adding options to Chrome extension button menu? [duplicate] - google-chrome-extension

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

chrome.tabs.executeScript only seems to execute in the active tab

I have the following code in a background.js.
chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
chrome.tabs.executeScript(tabId, {
file: 'inject.js'
});
} // if (changeInfo.status == 'complete') {
});
But when I change tabs the inject.js only runs in the active tab even if an inactive tab gets updated. In the inject.js I have an automated process running for a particular website and it's clicking through some pages looking for specific text. I want it to continue running on that one tab even if I open a new tab. But as soon as I change tabs the injection happens only on the active tab. I thought tab.tabId or tabId would be for the tab that was updated but it seems like it's always the active tab.
Is there a way to figure out what tab updated so I can pass the correct tabId to executeScript?
Here is what my manifest looks like:
{
"name": "Automated test",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_title": "Test"
},
"permissions": [
"https://*/*",
"http://*/*",
"tabs",
"webNavigation"
]
}
So, #wOxxOm led me to what I needed. I did need a content-script and the reason why I think I wasn't seeing the results I was expecting is that I was failing to remove and re-add my extension. Sometimes it seems like it respects the changes made but maybe when you make changes to the manifest you need to remove and re-add the extension.
Once I did that it is correctly working on the inactive tab.

Chrome extension query: How to update context menu from content script in time for it to be included in the context menu?

I'm trying to create a chrome extension that will add DOM information to the context menu (as a child item) when an element is right clicked. The code I have so far does put the information I want into the context menu, and console log shows the child items being added at the right point (and both are free of errors), but not in time for it to be included in the initial rendered context menu.
The ultimate effect being, I have to right click the element twice to see the context menu child items created by the first click.
The (slightly simplified) code I have currently is below:
content script:
document.addEventListener("mousedown", function(event){
if(event.button == 2) {
chrome.runtime.sendMessage(event.target.nodeName);
}
}, true);
background:
var parent = chrome.contextMenus.create({"title": "Node", "contexts":["all"]});
chrome.runtime.onMessage.addListener(
function(nodename, sender, sendResponse) {
chrome.contextMenus.create(
{"title": nodename, "parentId": parent});
});
manifest.json
{
"manifest_version": 2,
"name": "My extension",
"description": "This is an example extension.",
"version": "0.1",
"permissions": ["contextMenus", "clipboardWrite"],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", "*://*/*"],
"js": ["contentscript.js"]
}
]
}
Is there a way I can get the information added to the context menu in time for it to be included?
Define doSomething. Then it will work.
As it is, it's creating an error in the background context (on the extension page, click on the "Inspect views: background page" to view the console for the background.

Browser action to activate only on "content_script" matches

I thought this would be a regularly asked question, but I can not find the answer for it.
Is there a way for a chrome extension to have it's browser action popup available only on content_scripts matching pages?
Eg: I make an extension for a site. I want the popup to only be available when browsing the site (on the current tab). How do I do?
For me the browser action is always enabled by default, whatever page I'm browsing, and page action never enabled.
Thanks for your help
EDIT: Here is part of the manifest, I changed with pageAction with No success. I want my icon to activate only on tabs browsing LDLC.
{
"content_scripts": [
{
"js": [ "jquery.min.js", "scrooge.js" ],
"matches": [ "*://www.ldlc.com/fiche/*", "*://ldlc.com/fiche/*" ]
}],
"manifest_version": 2,
"permissions": [ "storage", "activeTab","*://ldlc.com/*", "*://scroogealpha.esy.es/*" ],
"page_action": {
"default_title": "Worth buying?", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
"web_accessible_resources": [
],
"background":{
"scripts" : ["eventPage.js"],
"persistent": false
}
}
Use a page action and in your background script listen for tab changes. When a tab url changes, check if you want to show the page action.
In your background script do something like this:
let matches = ["://www.ldlc.com/fiche/", "://ldlc.com/fiche/" ]
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
for (let i in matches) {
if (tab.url.includes(matches[i])) {
chrome.pageAction.show(tabId)
break
}
}
})
Also add the tabs permission in your manifest.

Chrome extension open new tab on new tab

I have created a Chrome extension that, as part of it's operation, opens a new tab with a specified url.
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "open_new_tab" ) {
chrome.tabs.create({"url": request.url});
}
}
);
(Full code available on GitHub)
This works fine on tabs with webpages, but I cannot get it to work on empty tabs, for example: chrome://apps/ To clarify, if I have a tab open and it is on stackoverflow.com, then when I click on my extension button it opens a new tab loading a generated url. When I am on a new tab, or a tab where the url begins with chrome:// then the extension does not work.
What permissions do I need to include to allow the extension to open in ANY tab? Including new tabs and any chrome:// tab?
Manifest.json:
{
"manifest_version": 2,
"name": "MyMiniCity Checker",
"short_name": "MyMiniCity Checker",
"description": "Checks what your city needs most and redirects the browser accordingly.",
"version": "0.2",
"author":"Richard Parnaby-King",
"homepage_url": "https://github.com/richard-parnaby-king/MyMiniCity-Checker/",
"icons": {
"128": "icon-big.png"
},
"options_page": "options/options.html",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": ["tabs","storage","http://*.myminicity.com/","http://*/*", "https://*/*"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [ {
"matches": [ "http://*/*", "https://*/*"],
"js": [ "jquery-1.11.3.min.js" ]
}]
}
Background.js:
//When user clicks on button, run script
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, { file: "jquery-1.11.3.min.js" }, function() {
chrome.tabs.executeScript(null, { file: "contentscript.js" });
});
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "open_new_tab" ) {
chrome.tabs.create({"url": request.url});
}
}
);
It appears as though the background.js file is not being executed. I suspect this to be a permissions. What permissions do I need in order to run this extension in every tab?
Well, this message is supposed to come from a content script you're trying to inject into the current tab.
The widest permission you can request is "<all_urls>", however, there are still URLs that are excluded from access.
You can only normally access http:, https:, file: and ftp: schemes.
file: scheme requires the user to manually approve the access in chrome://extensions/:
Chrome Web Store URLs are specifically blacklisted from access for security reasons. There is no override.
chrome:// URLs (also called WebUI) are excluded for security reasons. There is a manual override in the flags: chrome://flags/#extensions-on-chrome-urls, but you can never expect it to be there.
There is an exception to the above, chrome://favicon/ URLs are accessible if you declare the exact permission.
All in all, even with the widest permissions you cannot be sure you have access. Check for chrome.runtime.lastError in the callback of executeScript and fail gracefully.
As I was wanting this to run on EVERY page it meant I could not have the code in the content script. I moved all the code into the background script:
chrome.browserAction.onClicked.addListener(function(tab) {
//...
chrome.tabs.create({"url": newTabUrl});
//...
});
So when I click on my button the above code is called, using the enclosed jquery script.

Render context menu depending on selection

I want to display a different menu option depending on whether a number or text is selected.
I've tried playing with content scripts but I can't get them to work in gmail which is where I need it to work. Here is what I have, it works on sites other than gmail (is it a https thing?)
Background.html
<script src="driver.js"></script>
content_script.js
document.addEventListener("mousedown", function(event){
if(event.button == 2) {
var selection = window.getSelection().toString();
chrome.extension.sendRequest({cmd: selection});
}
}, true);
driver.js
chrome.extension.onRequest.addListener(function(request) {
alert(request.cmd);
});
manifest.json
{
"name": "Context Menu Search",
"description": "Opens the selected text as keyword in a new window",
"version": "0.1",
"permissions": ["contextMenus"],
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["content_script.js"]
}
],
"background_page": "background.html"
}
Selection type changes context menu using chrome extension
You will have to set a listener for mouse down. There is no other way to get the selected text before the menu is created.
See this SO question:
chrome extension context menus, how to display a menu item only when there is no selection?
Here is part of the code the rest is at the link.
document.addEventListener("mousedown", function(event){
//right click
if(event.button == 2) {
if(window.getSelection().toString()) {
chrome.extension.sendRequest({cmd: "createSelectionMenu"});
} else {
chrome.extension.sendRequest({cmd: "createRegularMenu"});
}
}
}, true);

Resources