We Keep Coding

No output to service worker console with chrome extension

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://cnn.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?

Accessing DOM in Chrome Extension

I'm using the example here as a starting point for accessing some DOM elements on the user's current tab. In popup.html, I have the following:
<script type="text/javascript" src="popup.js"></script>
And the first lines of popup.js are:
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("test");
console.log('Turning ' + tab.url + ' red!');
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
Manifest.json has the following permissions:
{
"manifest_version": 2,
"name": "",
"version": "1.0",
"description": "",
"icons": { "16": "icon16.jpg",
"48": "icon48.jpg",
"128": "icon128.jpg" },
"minimum_chrome_version": "46",
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "getDescription.js"],
"run_at": "document_start"
}],
"options_page": "options.html",
"permissions": ["<all_urls>", "tabs","storage", "activeTab"]
}
Nothing is appearing in console, as if function isn't firing at all.

As it mention here onClicked fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
If you want to have the popup and then to execute a script when the icon is clicked use below approach.
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "la lala laa",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
Inside the background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "popup.js"});
});
Or it should work fine if you have below in your popup.html
<script src="popup.js"></script>
Inside your popup.js
window.onload = function() {
console.log("do whatever you want here !!!")
}

Error on calling Javascript APIs within Firefox extension

I am currently building a web extension and in the stage of porting between browsers. On moving from Chrome to Firefox I am coming against an issue in using the runtime.sendMessage API that allows me to talk between the content and background scripts.
The message code in the content script:
browser.runtime.sendMessage('d089938d-ba63-4c40-98ab-b8515db1bbca', { greeting: "screenshot-please" }, function (response) {
localStorage.setItem("image", response.farewell);
});
var image = localStorage.getItem("image");
The Background script:
var img = saved-image;
browser.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if(request.greeting === "screenshot-please"){
sendResponse({
farewell: img
});
}
}
);
and the manifest:
{
"description": "...",
"manifest_version": 2,
"name": "...",
"permissions": [
"find",
"tabs",
"activeTab",
"<all_urls>"
],
"applications": {
"gecko": {
"id": "..."
}
},
"background": {
"scripts": ["/JavaScript/moz-initialPopup.js"]
},
"content_scripts": [
{
"all_frames": true,
"matches": ["*://127.0.0.1:3000/*"],
"js": ["Javascript/dataGrab.js"]
}
],
"icons": {
"48": "..."
},
"browser_action": {
"browser_style": true,
"default_title": "...",
"default_icon": {
"48": "..."
}
},
"version": "1.0"
}
When in chrome (replace all instances of *browser with *chrome) this messaging system works fine. When in firefox, in the developer tools I get 'ReferenceError: browser is not defined'.
Can anyone assist me in why I would not be able to access the browser here?

Chrome Extension - Notification on Certain Web Pages

I'm looking to pop up a chrome notification whenever the user visits certain web pages e.g. 'www.amazon.com' or 'google.com' etc. The extension loads into chrome perfectly fine with no errors, but the notification doesn't pop up when I head to those specific pages.
I currently have the below scripts.
manifest.json
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"description": "This extension was created with the awesome extensionizr.com",
"homepage_url": "http://www.test.co.uk",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"options_page": "src/options/index.html",
"browser_action": {
"default_icon": "icons/icon19.png",
"default_title": "browser action demo",
"default_popup": "src/browser_action/browser_action.html"
},
"permissions": ["notifications"],
"content_scripts": [
{
"matches": ["http://www.amazon.com/*", "http://amazon.co.uk/*"],
"js": ["js/script.js"]
}
]
}
js/script.js
if(onCertainWebsitesNeedNotificationAppearTrue) {
// send message to background script
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
});
}
background.js
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
chrome.pageAction.show(sender.tab.id);
sendResponse();
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
//alert("good");
if (request.greeting == "hello")
createNotification();
});
function createNotification(){
var opt = {type: "basic",title: "Your Title",message: "Your message",iconUrl: "128.png"}
chrome.notifications.create("notificationName",opt,function(){});
//include this line if you want to clear the notification after 5 seconds
setTimeout(function(){chrome.notifications.clear("notificationName",function(){});},10000);
}
New to chrome extension coding so any help would be appreciated!

onCertainWebsitesNeedNotificationAppearTrue isn't defined anywhere so the code is not executed and the message is not sent.
Use the devtools debugger to diagnose the problems.
Also move the code from chrome.extension.onMessage callback inside chrome.runtime.onMessage callback and remove the former.

Open extension page in new tab

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.