With Opera, I'm playing with the example extension that looks up a selected text using the contextMenu. I would like to add a menu entry in the contextMenu when the user right click in the address-bar (url-bar, omnibox and so on) I have tried
In the manifest:
"page_action": {
"default_icon": {
"16": "icon_16.png"
},
"default_title": "Context Menu API - Search Selected Text"
},
and in the background script:
chrome.contextMenus.create({
title: "Look url up: \"%s\"",
contexts: ["page_action"],
onclick: searchText
});
But without success. Is that possible ? am I missing something obvious ?
Thanks
F.
I'm afraid you can only use the %s template when the context is "selection" within the document.
Also, right-clicks on the omnibar would never be routed to your extension - there isn't a context for that.
In Chrome 49+, the Page Action is the icon your extension gets in the toolbar. Previously (and, supposedly, currently in Opera) it was an icon inside the omnibox itself - but you had to expressly "show" it for each page. Only right-clicks on that icon count as "page_action" context.
Related
I'm trying to write my first Chrome extension. I want to be able to select text with the mouse in text field in website and by clicking on context menu to change this text.
Here's the eventPage.js:
chrome.contextMenus.onClicked.addListener(function(clickData) {
if (clickData.menuItemId === "change" && clickData.selectionText) {
}
});
Here's the manifest.json:
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"permissions": ["contextMenus"]
Can anyone tell me what I need to do?
It says you are new to StackOverflow. Welcome! :D
Check the link below you'll have your answer there.
Text selection and display in context menu chrome extension
I'm trying to build a somehow dummy Chrome extension. I want it to run only in specific pages, so I'm using a Page Action.
Let's say I want the page action to run on the Instagram website, then (accordingly the docs), I would need something like this on my manifest.json right?
{
"manifest_version": 2,
"name": "Some name",
"version": "0.0.3",
"description": "Some description",
"content_scripts": [
{
"matches": [
"https://www.instagram.com/*"
],
"js": ["content.js"]
}
],
"page_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
}
}
while the content script runs only on instagram pages as one would expect, the browser extension is not clickable (gray look, and when I click most options are not clickable).
this makes impossible to act upon extension button click. In my background.js I have:
function click(tab) {
console.log('click from ' + tab);
}
chrome.pageAction.onClicked.addListener(click);
that never gets called.
So, what's wrong that makes impossible to act upon extension click on some pages?
Note: I saw this question/answer, but couldn't find the problem/solution How can I add a click for pageAction?
You have to call pageAction.show in order for your pageAction button to be enabled (clickable).
The pageAction documentation says (emphasis mine):
You make a page action appear and be grayed out using the pageAction.show and pageAction.hide methods, respectively. By default, a page action appears grayed out. When you show it, you specify the tab in which the icon should appear. The icon remains visible until the tab is closed or starts displaying a different URL (because the user clicks a link, for example).
With a manifest.json content_scripts entry
Because you already have a content script that runs on the page you desire to have this function on, probably the easiest way to do this is to have your content script send a message to your background script telling it to show the page-action button for that tab.
Your content script could look something like:
chrome.runtime.sendMessage({type: showPageAction});
Your background script could look something like:
chrome.runtime.onMessage(function(message, sender, sendResponse) {
if(typeof message === 'object' && message.type === 'showPageAction') {
chrome.pageAction.show(sender.tab.id);
}
});
Without a manifest.json content_scripts entry
If you did not have a content script, you would probably want to use a webNavigation.onCompleted listener, or tabs.onUpdated listener, to listen for a change in the tab's URL in order to determine that the page-action button should be shown. Obviously, the trigger for calling pageAction.show() does not have to be the URL which is currently displayed in the tab, but that is the most common.
I am developping an extension and I would like to let the users choose if they want the browserAction button to open an HTML page in the popup or to open it in a new tab.
first case (in manifest):
"browser_action": {
"default_icon": {
"19": "data/button.png"
},
"default_page": "./popup/popup.html"
}
second case (in index.js):
chrome.browserAction.onClicked.addListener(function() { window.open('../popup/popup.html', ...); });
Is there a way to switch between these two cases in the background script?
Yes, you can use chrome.browserAction.setPopup(). If you set the popup to '', no popup is shown:
chrome.browserAction.setPopup({popup: ''});
You can then set the popup back to a HTML page when you are wanting the popup:
chrome.browserAction.setPopup({popup: '/myPopup.html'});
A convenient thing is that if a popup is shown, the browserAction event is not fired. Thus, the tab will not open. This switches between the two by either setting the browserAction.setPopup() to '', or not.
I am trying to make a simple chrome extension.
It is supposed to add an item "Open new tab" in the 'windows system tray chrome icon context menu' (similar to how the checker plus for gmail extension has done; see the second image given below).
when I click the option, chrome is supposed to (check if any window is open. If yes, then it is supposed to) open a new tab page. If no windows are open, then it is supposed to open a new chrome window with the new tab page showing.
What I have done till now:
manifest.json
{
"manifest_version": 2,
"name": "Open New Tab",
"description": "This extension open a new tab page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"background":{
"scripts":["background.js"],
"persistent": false
},
"permissions": [
"background",
"activeTab"
]
}
background.js
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.tabs.create({ url: "chrome://newtab" });
}
);
background.html
<html>
<head>
<script>
chrome.browserAction.onClicked.addListener(function(window)
{
chrome.windows.create({url: "chrome://newtab", type: "normal"});
}
);
</script>
</head>
</html>
I have already loaded this extension.
The effects of my extension on chrome so far:
1) Chrome window is already open.
My icon shows up in the list of extensions and is clickable.
On clicking, a 'new tab' page is opened in the same window. This is correct. (Though I don't need this. For now, let it be.)
2) Chrome window is closed, and chrome is allowed to run in the background. Rightclick the chrome tray icon. My extension menu 'Open a new tab' shows up in the menu.
This is also correct. On clicking it, a new chrome window is created. (Currently, I have not yet checked if a window already exists. That is to come later.).
The problem is that, in the new window that opens, instead of the 'new tab' page, chrome automatically opens the 'chrome://extensions' URL. This is wrong, and I cannot understand why the extensions page is opening. I want to open the new tab page, and i am passing the 'chrome://newtab' URL. How do I make chrome open the new tab page from here? Chrome works correctly when I start it from my desktop icon or windows start menu. So, the problem seems to be something with my code.
Any help is appreciated.
Listen to chrome.windows.onCreated event, when right clicking chrome tray icon, a new window would be launched, then you could create a new tab in the event handler.
chrome.windows.onCreated.addListener(function(window) {
chrome.windows.getAll(function(windows) {
if (windows.length === 1) {
chrome.tabs.create({windowId: window.id, url: "chrome://newtab"});
}
});
});
I have a context menu in my chrome extension and now I need to capture a specific page elements when the user click on that menu.
This is my manifest file:
{
"manifest_version": 2,
"name": "Capture",
"description": "This extension is capturing all text elements in the page",
"version": "0.1",
"permissions": ["contextMenus"],
"background": {
"scripts": ["jquery-2.0.2.js", "background.js"]
},
"manifest_version": 2
}
background.js
function captureTextBoxes(e) {
var textboxes = $(':text') ;
//alert(textboxes.length);
textboxes.each(function (i){
//code here
}
}
chrome.contextMenus.create({
title: "Capture All text box Elements",
contexts:["page"],
onclick: captureTextBoxes,
});
This was capturing 0 text box elements always. So I checked the passed document by adding following line:
alert(document.documentElement.innerHTML);
It returns this :
<head></head>
<body style="">
<script src="jquery-2.0.2.js"></script>
<script src="background.js"></script>
</body>
This is not my actual page, but a dynamic page created by the chrome itself.
Is there anyway to access the actual page content that were right clicked for the context menu? (From a background javaScript)
The contextMenus.onClicked event (which triggers the callback specified by onclick (in persistent background pages only)) is only available to the background page and the background page has no direct access to any web-page's DOM.
If you want to manipulate the web-page DOM, you have to:
Inject a content script into the web-page.
Pass a message to that content script, so it can manipulate the DOM for you.
(There are plenty of resources here in SO explaining how to achieve both.)
Take, also, a look at this answer to a similar question