I'm developing a Chome extension. When you click on the extension icon, the contextMenu is accessible by a right-click and a left-click.
Actually, I don't have a browserAction in my manifest.json, so my problem is my icon is grayed out. The solution is to add a browserAction. But if I add a browserAction, the left-click don't show the default menu, but shows nothing.
What I want is a colored icon and when I left-click that the default Chrome extension popup is opened.
Default Chrome Extension popup example:
My manifest.json
{
"manifest_version": 2,
"name": "Awesome app",
"version": "0.1",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [
"storage",
"contextMenus"
],
"icons": {
"16": "icons/se16.png",
"32": "icons/se32.png",
"158": "icons/se158.png"
}
}
Can someone help me?
It's not possible to have the default menu AND a colorful icon because the very presence of "browser_action" key means the extension wants to interact with the user and instructs the browser to either delegate icon click event to background page script in chrome.browserAction.onClicked listener or show a popup window if "default_popup" is declared in manifest or the popup was set programmatically via chrome.browserAction.setPopup.
The only way to "ignore" the click event in browserAction API is to disable the icon via chrome.browserAction.disable which will gray it out thus defeating the initial goal.
Well, you can show/do something useful on click. The default menu isn't very useful, anyway.
Related
I want to know that, is it possible to open popup on right click and redirect to some website on left click in a chrome extension.
If i am adding popup.html in manifest under page_action properties, then my background.js scripts not working, only popup opens.
My manifest.json file is below
{
"name" : "Sherlock Extension",
"description" : "Sherlock extension for drop alert datasource
integration",
"version" : "1.2.3",
"manifest_version": 2,
"page_action": {
"default_icon": "icon.png",
"default_popup" : "popup.html"
},
"background": {
"scripts": ["lzString.min.js", "background.js"],
"persistent": false
},
"permissions" : [
"storage",
"tabs",
"https://sherlock.reports.mn/api/v1",
"declarativeContent"
]}
There's no event you can intercept on right-click on the extension Browser/Page Action. It will open a context menu.
Notes:
You can add your own entries to that context menu with chrome.contextMenus API.
Having a default_popup overrides all onClicked listeners; if you want to both open a popup and do something in background, you'll need to call the background from the popup.
I'm building my first chrome extension, which replaces the New Tab. I'm trying to change the icon and name of the tab with:
"short_name": "New Tab",
"browser_action": {
"default_icon": "img/icon32.png"
}
but all I see in the actual tab's header is "chrome://newtab" and no icon. What am I doing wrong?
When the browserAction icon is clicked for my Chrome extension, I want to prevent it from showing the browserAction popup. I'm trying to use the browserAction icon to trigger the loading of a content script instead.
How would I do this?
The following doesn't prevent it from opening:
chrome.browserAction.onClicked.addListener(function (tab) {
alert('browserAction clicked');
return false;
});
Here is my manifest.json entry for this:
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "My extension"
}
The docs say This event will not fire if the browser action has a popup, however, as you can see I don't have a popup defined but it still doesn't work.
When you press the extension button, the following happens.
If you have a popup defined for the current tab (e.g. by the default_popup key in the manifest or chrome.browserAction.setPopup), it is shown. The chrome.browserAction.onClicked is not raised.
If the popup is not set (or set as empty) for the current tab, chrome.browserAction.onClicked is dispatched.
So, to disable this permanently, you just need to remove default_popup from the manifest. To disable it programmatically, you need to unset it:
chrome.browserAction.setPopup({
popup: "",
// tabId: id // optional, restrict to a single tab
});
Let's say I have an extension that loads when you arrive at a YouTube video page.I have noticed that when one navigates back and forth using the Chrome buttons, the extension most probably won't load.
As an example, I have 2 files, the manifest:
{
"name": "back forth",
"version": "0.1",
"manifest_version": 2,
"description": "back forth",
"permissions": ["storage", "*://www.youtube.com/watch*"],
"content_scripts": [
{
"matches": ["*://www.youtube.com/watch*"],
"js": ["contentscript.js"]
}
]
}
and the contentscript
alert("loaded");
The alert does not always show up when navigating back and forth. How can I overcome this, so that the extension loads every time?
YouTube has started a trial with pushState-based navigation. In general, such navigations can only be detected within content scripts by injecting code that intercept calls to history.replaceState / history.pushState (or by using the chrome.webNavigation.onHistoryStateUpdated event in the background page).
The remainder of this answer is specific to YouTube.
YouTube shows a (red) progress bar on top of the page during load. This progress bar is animated using a CSS transition. Since transition events bubble, you can bind a transition event listener to <body>, and check navigation in these cases.
You have to insert your content script at *://www.youtube.com/* instead of *://www.youtube.com/watch*, because pushState can be used to navigate from / to /watch...
function afterNavigate() {
if ('/watch' === location.pathname) {
alert('Watch page!');
}
}
(document.body || document.documentElement).addEventListener('transitionend',
function(/*TransitionEvent*/ event) {
if (event.propertyName === 'width' && event.target.id === 'progress') {
afterNavigate();
}
}, true);
// After page load
afterNavigate();
Note: This method depends on the fact that the progress bar is inserted. Whenever Google decides to rename the ID of the progress bar, or remove the progress bar altogether, your code will cease to work.
Note 2: This only works for active tabs. If you need to detect navigation changes while the tab is not focused, then you need to bind a window.onfocus and window.onblur event, and check whether document.title has changed between these events.
I successfully created my first Chrome extension. It now runs only when the extension icon is clicked instead of on the background, and that is great. However, I would like to add more actions to my extension I have been trying to use an extension popup to run other functions but I can't make it work. It doesn't have to be like that, so I am open for suggestions. I do not want to use context menus. I want people to click on the extension icon and show them a "menu".
Right now my extension only alerts a message when it finds a valid page (from mydomain.com), and it finds a hidden field with the name "returnURL". It alerts the value.
I would like to be able to add the ability to click on the icon but instead show an options menu with multiple options.
Something like this:
Click on the extension icon and show two options
Get Response URL (this option will run the current functionality I have now)
Do something else (So I could have another function to execute on the
loaded page)
...and more options if I needed to add them on future versions of my extension.
How do I modify my extension to do that.
Here is my code:
manifest.json
{
"name": "Get Response URL",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "mkto_icon.png",
"name": "Click to get URL"
},
"background":{
"scripts":["background.js"]
},
"permissions":["http://mydomain.com/*"]
}
background.js
chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON
if (tab.url.indexOf("http://mydomain.com/") != -1) { // Inspect whether the place where user clicked matches with our list of URL
chrome.tabs.executeScript(tab.id, {
"file": "contentscript.js"
}, function () { // Execute your code
console.log("Script Executed .. "); // Notification on Completion
});
}
});
contentscript.js
if (document.getElementsByName("returnURL")){
alert("\nThe Response URL on this form is:\n\n" + document.getElementsByName("returnURL")[0].value);
}
I followed the documentation I found on the Google Extensions developer site but I couldn't make it work. Your help is much appreciated.
You cannot have a real menu with a Chrome extension. You can however show an HTML page when the button is clicked (a pop-up). You can style this HTML page in a way that looks similar to a menu:
"browser_action": {
"default_icon": "mkto_icon.png",
"default_title": "Click here to open menu",
"default_popup": "popup.html"
},
Add a file popup.html to you extension and whatever content you want to show up. Scripts loaded by the pop-up page can load content scripts and communicate with them just like the background page.
For reference: browser actions documentation.