I have this problem with Mozilla Firefox. I made an addon that finds selected text in a dictionary by opening an online dictionary with translated selected text.
Problem: When I clicked to my custom function in Contexts Menu it should open Online dictionary in new tab unfortunetly it doesn't open anything. In the Contexts Menu I still see my addon option to "find the word in dictionary", but it just doesn't want to open.
my background.js script used for Mozilla.
chrome.contextMenus.create({
id: "1",
title: "Najít \"%s\" ve slovníku",
contexts: ["selection"],
onclick: openTab(),
});
function openTab() {
return function (info, tab) {
let text = info.selectionText;
let dicLink = "https://slovnik.seznam.cz/preklad/nemecky_cesky/" + text
chrome.tabs.create({ index: tab.index + 1, url: dicLink, selected: true });
}
};
Same background.js script but for Chrome:
chrome.contextMenus.create({
id: "1",
title: "Najít \"%s\" ve slovníku",
contexts: ["selection"],
});
chrome.contextMenus.onClicked.addListener(
openTab()
)
//opens tab and give selected text into german to czech dictionary
function openTab() {
return function (info, tab) {
let text = info.selectionText;
let dicLink = "https://slovnik.seznam.cz/preklad/nemecky_cesky/" + text
chrome.tabs.create({ index: tab.index, url: dicLink, selected: true });
}
};
Why am I asking: I ask because I used nearly same code to use on Google Chrome where it works perfectly, and from the documentation of Firefox I understood, that the Chrome code should be compatible with Firefox, so I really don't understand what is wrong...
Good to know: For the Chrome version of my addon I used ManifestV3, I have been told that I should use it. On the other hand, Firefox says that it still only supports ManifestV2.
Chrome manifest
{
"manifest_version": 3,
"name": "Německý Seznam slovník vyhledáváč",
"version": "1.0",
"description": "Otevře německý slovník od Seznamu.",
"permissions": [
"contextMenus"
],
"background": {
"service_worker": "js/background.js"
},
"browser_action": {
"default_icon": "images/icon2.png"
},
"icons": {
"16": "images/icon2.png",
"32": "images/icon2.png",
"48": "images/icon2.png",
"128": "images/icon2.png"
}
}
Firefox manifest
{
"manifest_version": 2,
"name": "Seznam-slovnik vyhledavac",
"version": "1.0",
"description": "Otevře německý slovník od Seznamu.",
"permissions": [
"contextMenus",
"tabs"
],
"background": {
"scripts": [
"js/background.js"
]
},
"browser_action": {
"default_icon": "images/icon2.png"
},
"icons": {
"16": "images/icon2.png",
"32": "images/icon2.png",
"48": "images/icon2.png",
"128": "images/icon2.png"
}
}
Related
I'm trying to build an extension to monitor the xhr portion of the devtools network tab. I decided to start as simple as possible with the background script below. I'm seeing no errors on loading the extension, but don't see any output in the console.
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": [
"https://yahoo.com/*"
],
"permissions": [
"webRequest"
]
}
In my background.js:
(function () {
chrome.webRequest.onCompleted.addListener(
function (details) {
console.log('HELLO THERE!!!!', details);
},
{ urls: ["<all_urls>"] }
);
}());
What am I doing wrong?
The background-page and webpage console log to different places so you wouldn't see console.log('HELLO THERE!!!!', details); in the webpage's console. Refer the answer below for how to view the background-page console.
Accessing console and devtools of extension's background.js
I want to build a chrome extension on click on it should display the list(websites/links) of google search results. Suppose I search on google by typing Delhi to Bangalore. Then list of travelling websites/link appears. That list should be display on the console.
This is the 1st time working on chrome extension. I also took the help of [https://developer.chrome.com/extensions/getstarted][1] . But result was not achieved.
I tried find some Api of chrome extension on https://developer.chrome.com/extensions/devguide. But not abled to find the appropriate api. I have tried Web Request api.
1. manifest.json
{
"name": "Search List",
"description": "Google Search List",
"version": "0.1",
"permissions": [
"declarativeContent",
"storage",
"activeTab"
],
"background": {
"scripts": [
"searchListContent.js"
],
"persistent": false
},
"page_action": {
"default_popup": "searchListTemplate.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"default_title": "Google Search List"
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
2. searchListContent.js
chrome.runtime.onInstalled.addListener(function () {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostEquals: 'www.google.com' },
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
var searchList = document.getElementById("printListId");
console.log(searchList); });
I would like my Chrome Extension to on show up on google and amazon. My manifest.json looks like this:
{
"background": {"scripts": ["background.js"]},
"content_scripts": [
{
"matches": ["*://*.google.com/*", "http://www.amazon.com/*", "*://*.amazon.com/*"],
"js": ["background.js"]
}
],
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
But it doesn't show up on either google or amazon and I can't figure out why.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
And here is the bookmarlet.js
setTimeout('x99.focus()', 300);
var re = /([\/-]|at[at]n=)/i;
if (re.test(location.href) == true) {
var isbn = RegExp.$2;
var x99 = window.open('http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=' + atatn, 'Library', 'scrollbars=1,resizable=1,top=0,left=0,location=1,width=800,height=600');
x99.focus();
}
Any ideas? Thanks for your help.
Many mistakes in the code.
You don't need content script here, all operations could be executed
within background page content
It it hard to make background page
code works within content script, this is definitely not a your case.
So using the same background.js as both background and content script
does not work in your case at least
Manifest does not declare browser
action.
And so on
I strongly suggest to start with Google extension documentation. You will save a lot of your time.
How I think files might look like
manifest.json
{
"background": {"scripts": ["background.js"]},
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Do Staff" // optional; shown in tooltip
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// You need more sothisticated regexp here which checks for amazon and google domains
var re = /([\/-]|at[at]n=)/i;
if (re.test(tab.url)) {
var isbn = RegExp.$2;
var url = "http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=" + isbn;
chrome.windows.create({
url : url,
left: 0,
top: 0,
width: 800,
height: 600,
focused: true,
type: "popup"
});
}
});
bookmarlet.js is not needed
I have a simple chrome extension which displays a little icon in Google Chrome. On click, it loads a search page of my site, which in term redirects you to the right page.
https://chrome.google.com/webstore/detail/w3patrol-watch-over-any-w/addcgpijdjacmndaadfgcpbfinagiplm is the extension.
Now, Google is forcing me to update to manifest version 2, instead of 1. But this is breaking my working extension.
In manifest.json I have added manifest_version 2, but since then the icon does not work anymore when I click on it.
{
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icon19.png",
"default_title": "__MSG_default_title__"
},
"default_locale": "en",
"description": "__MSG_description__",
"icons": {
"128": "icon128.png",
"19": "icon19.png",
"48": "icon48.png"
},
"name": "__MSG_name__",
"permissions": [ "tabs", "http://*.w3patrol.com/" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": "1.0",
"manifest_version": 2
}
This is background.html
<script type="text/javascript">
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.create( { url: "http://w3patrol.com/search.php?q=" +tab.url } );
});
});
</script>
What do I need to add/change to get it working with manifest version 2?
You just need to remove the script tag from your background page. Here's how background.js(instead of background.html) should look like:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.create( { url: "http://w3patrol.com/search.php?q=" +tab.url } );
});
});
And remove the 'page' property in background. Add 'scripts' property:
"background": {
"scripts": ["background.js"]
},
So I'm trying to make an extension that on click opens a tab and goes to a page. The only thing I can make it do so far is open a tab and give me this error:
No webpage was found for the web address:
chrome-extension://hgjkkhjinhilcehaaldcnopaefinlfif/https://www.google.com/
Here is the manifest.json:
{
"name": "New App",
"version": "0.1",
"permissions": ["tabs"],
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"icons": {
"48": "icon.png"
}
}
Here is background.js
chrome.browserAction.onClicked.addListener
(function(tab)
{chrome.tabs.create({'url': chrome.extension.getURL('https://www.google.com/')}, function(tab) {})
}
)
What I was trying to do was open a new tab and go to a website in the browser action. Here is the answer:
Manifest.json
{ "name": "Funny Pictures",
"version": "0.1",
"manifest_version": 2,
"description": "Rick Roll all your friends!",
"browser_action": {
"default_icon": "funnyface.png"
},
"icons": {
"48": "funnyface.png"
},
"background":{
"scripts": ["background.js"]
}
}
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
chrome.tabs.create({ url: newURL });
});
I swear I tried this previously, but that's how it goes I guess.