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
Related
I am making a chrome extension with a keyboard shortcut to open a pop-up and the code below works fine. It's just that I want the user to be able to specify the keyboard shortcut to open the browser action via the options.html page. How might I go about this?
Note: I am not open to using Jquery, other 3rd party plugins, or content-scripts.
I would prefer to use a dropdown w/ the allowed shortcut keys (Ctrl+Shift+Alt, Ctrl+Shift, Ctrl+Alt, Ctrl, & Alt) mixed with a textbox only allowing one key to be entered.
That last part is a sub-question, but the main thing here is:
How Can I make Customizable Keyboard shortcuts within options page?
Manifest.json:
| ... |
"browser_action": {
"default_icon": "png/Icon-128.png",
"default_title": "Gamez.io",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"activeTab",
"tabs"
],
"commands": {
"_execute_browser_action": {
"suggested_key": {
"windows": "Alt+X",
"mac": "Alt+X",
"chromeos": "Alt+X",
"linux": "Alt+X"
}
}
}
I figured out a way... Well kind of...
Steps:
Create a content.js file and list it in your manifest.
Then add the following code to your content.js file:
content.js:
window.onkeyup = function(e) {
if (e.which == 69) {
window.alert('You pressed \'e\' !');
}
};
Then see Here on how to make custom keyboard-shortcuts using JS.
Use JSON Files and chrome.setlocalstorage(something along those lines [still working on it] ) to save the users input from options.html.
My current Question: Here How the heck do I trigger the Browser_Action!?
There is no clean/ideal way to customize shortcuts thru an extension since those are set thru the manifest and not alterable programmatically. However the shortcuts you described in your manifest can be manually modified by the user in the chrome://extensions page.
I'm trying to create my first Edge extension after being forced to use the browser for a while and finding that I actually quite like it.
My extension just shows a new context menu entry on the page. The extension loads in Edge and appears in the extensions pane along with the meta data (description, version etc) but the context menu itself doesn't show when I right click the page.
Any one familiar with Edge extensions know why? Here's the code.
index.js
browser.contextMenus.create({
id: "MyMenu",
title: "My Context Item",
contexts: ['page']
});
browser.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == "MyMenu") {
Code goes here;
}
});
manifest.json
{
"manifest_version": 2,
"name": "MyMenu",
"version": "1.0.0",
"description": "My Menu.",
"author": "Oliver Marshall",
"permissions": ["contextMenus"],
"background": {
"scripts": ["index.js"],
"persistent": true
}
}
It's fairly boilerplate stuff, in fact it is boilerplate stuff.
Turns out that while the extension loads, context menu handlers appear to require a restart of the browser for the menu item to be created.
After reloading Edge, and re-enabling the extension, the context menu is showing.
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.
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.
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