How to display pageaction icon on specific website? - javascript

Here is my manifest.json, just in case for reference.
{
"manifest_version": 2,
"name": "Results app", "description": "This extension helps
calculate your total and percentage.", "version": "1.0",
"permissions": ["http://www.example.com/*"],
"page_action": {
"default_icon": {
"19": "icon.jpg"
},
"default_title": "",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://www.example.com/*"],
"js": ["contentscript.js"]
}
]
}
How do I get pageaction icon to be displayed on the site which matches the criteria as given in manifest.json.
I tried this but no avail.
Generally, now how can I get pageaction icon to be displayed??
Debugging background page: I got this error

The best way to show the page action button (since Chromium 33) is via the chrome.declarativeContent API:
For example, to show the page action on example.com and its subdomains, the following code can be used:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
hostSuffix: 'example.com'
}
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Do not forget to add the declarativeContent and *://*.example.com/ permissions to your manifest file.
See the documentation of the UrlFilter type for more ways of matching URLs, and chrome.declarativeContent for usage details.

Related

why Change url in Chrome tab it doesn't update tab Url when typing specify url?

I wanna make Chrome extension that when for example I typing this address:
ul/g
automatic update tab URL to:
http://ultra.com/g
this is my manifest.json:
{
"manifest_version": 2,
"name": "Test ",
"description": "Test",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.htm"
},
"background": {
"scripts": [
"src/background.js"
],
"persistent": true
},
"permissions": [
"tabs",
"activeTab",
"http://*/*",
"<all_urls>"
],
"content_scripts" : [{
"matches" : [ "http://test.com/*","<all_urls>"],
"js" : ["myScript.js"]
}]
}
and in my background.js file:
chrome.tabs.onUpdated.addListener( function( tabId, changeInfo, tab) {
if(tab.url=="ul/g"){
chrome.tabs.update(tab.Id, {url: 'http://ultra.com/g'});
}
});
why this not working?
Assuming the entire question is why this not working? an answer would be because ul/g is not an URL so Chrome redirects the text to a search engine. Here's what chrome.tabs.onUpdated sees:
{title: "ul/g - Google Search"}
{status: "loading", url: "https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=ul/g&*"}
{status: "complete"}
You can intercept omnibox search requests using webRequest API. For example with google search by default you can see requests like this:
https://www.google.com/complete/search?client=chrome-omni&..............&q=ul%2Fg..............
So check if the URL has &q= parameter that matches e.g. \w+%2Fg and abort it using a blocking onBeforeRequest listener, then update the tab URL to http://ultra.com/g. You can find examples here on StackOverflow and in the documentation.

Message passing from an internal extension page to content script

I'm developing a simple extension for word translating.
What I'm stuck with is I'm using an internal page for settings. What I want to do is passing an array (or any data at least -i'm that devastated-) from this internal page to content script.
I've tried
content script
var port = chrome.runtime.connect();
window.addEventListener("message", function(event) {
// We only accept messages from ourselves
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
window.alert("Content script received: " + event.data.text);
port.postMessage(event.data.text);
}
}, false);
internal page's javascript
window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
Internal page is a html file. I want to use it as a settings page. Like AdBlock's "options" page which you can reach from its popup page.
manifest.json
{
"manifest_version": 2,
"name": "Jun",
"description": "See selected words' equivalent.",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Click Here!",
"default_popup": "popup.html"
},
"permissions": [
"storage",
"tabs"
],
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"css": ["/lib/jquery-ui.min.css"],
"js": ["/lib/jquery-3.1.1.js", "/lib/jquery-ui.min.js", "/lib/jquery.mark.js", "content.js"],
"run_at": "document_end"
}]
}
and some other useless things so far.
For clarification; extension page link
chrome-extension://inbhgljjpkpodbamjfkehcmloabbhccn/category_settings/categorySettings.html
I hope I could express myself.
Thanks in advance!
PS: You can see project from https://github.com/MisketAdam/Jun
PS2:
extension directory
.
|──*etc*
|──content.js
|──category_settings/
| |──categorySettings.js
| |──categorySettings.css
| |──categorySettings.html
| |──*etc*
SOLVED
Yeah so... After reading https://developer.chrome.com/extensions/messaging throughly and trying out
chrome.runtime.sendMessage
at the internal page's javascript and handling it from background page got it working.
Thanks everyone!

Chrome extension - onclick icon event

As you can see, I have a problem with onclick event in chrome extension and I need your help.
$(function jony() {
jQuery.each( jQuery('img'), function() {
jQuery(this).attr('src', 'urlimage');
});
});
chrome.browserAction.onClicked.addListener(function(tab) {
jony();
});
Manifest:
{
"manifest_version": 2,
"name": "Jonyzátor",
"description": "Change images on page to JoNy!",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Klikni na mě!"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
],
"content_scripts": [ {
"js": [ "jquery.js", "jonyza.js"],
"matches": [ "http://*/*", "https://*/*"]
}]
}
The scope in which jony is defined is limited to $(); outside it's simply undefined.
function jony() {
jQuery.each( jQuery('img'), function() {
jQuery(this).attr('src', 'urlimage');
}
$(jony); // Will execute on page load
// and you can still use it here
I'm not sure it was the logic you intended - do you want it to run both at page load AND when you click?
You can't use browserAction API in content scripts. The proper place for it would be a background (or event) script, and then you can message your content script to do something.

Changing a Tabs Location in a Chrome Extension

I want to be able to click the HTML div button and relocate the current tab.
redirect.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.update(tab.id, {
url: "http://www.roblox.com/"
});
});
popup.html
<html>
<script src="redirect.js"></script>
</html>
manifest.json
{
"name": "z",
"version": "0.1",
"description": "z",
"background": {
"page":"popup.html"
},
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["redirect.js"]
}
],
"permissions": [
"tabs",
"bookmarks",
"<all_urls>",
"unlimitedStorage"
]
}
Those are my current scripts, it doesn't let me use onclick when I add a div button, I need that help mainly.
1: you did not specify the browserAction in the manifest.json. If you want to use chrome.browserAction.onClicked, you have to specify a browser action. add an extension icon.
2: you do not need content script
3: if you only want a single redirect function, you do not need to request bookmarks and all urls and storage permissions.
so here is your manifest.json should be :
{
"name": "z",
"version": "0.1",
"description": "z",
"background": {
"page":"popup.html"
},
"manifest_version": 2,
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": {
"19": "icon.png" //you have to put an image icon.png in to the folder.
},
"default_title": "Redirect" //optional
}
}
Then it will works.
plus, do not name your background file as "popup.html", popup usually used as a popup window.
you can also download the extension here, only this script will redirect to google after click. you can modify it yourself.
https://drive.google.com/file/d/0B-gxNl6LTj5jdkZPTm9qQXB4S1U/view?usp=sharing

Very simple Chrome Extension to display alert

I am trying to create a quick Chrome extension (complete beginner) and just want to display an alert whenever the icon is clicked, so I tried the following:
manifest.json
{
"name": "Something",
"version": "1.0",
"manifest_version": 2,
"description": "Woohoo",
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["bgscript.js"]
}]
}
bgscript.js
chrome.browserAction.onClicked.addListener(function(tab) {
alert('icon clicked')
});
However when I click on my icon, nothing happens! Looking at the above - can anyone spot why this wouldn't work?
In order to be notified for browser-action's onClicked event, you need a background-page (or better yet event-page), not a content-script.
Change your manifest like this:
// Replace that:
"content_scripts" : [{...}]
// with this:
"background": {
"persistent": false,
"scripts": ["bgscript.js"]
}
If you want the browser-action to invoke something on a content-script, you need to communicate throught the background-page using Message Passing (e.g. Simple one-time requests).
E.g.:
manifest.json
{
"name": "Something",
"version": "1.0",
"manifest_version": 2,
"description": "Woohoo",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["content.js"]
}]
}
background.js
chrome.browserAction.onClicked.addListener(function (tab) {
/* Send a message to the active tab's content script */
chrome.tabs.sendMessage(tab.id, { action: 'saySomething' });
});
content.js
chrome.runtime.onMessage.addListener(function (msg) {
/* We received a message, let's do as instructed */
if (msg.action === 'saySomething') {
alert('something');
}
});

Categories