Debug Chrome extensions when window.onerror is handled - javascript

I'm trying to build my first Chrome extension but I found problems with debugging.
I'm able to console.log() but in the Developer Tools console (I'm working on the background.js; no UI) there's no report about syntax errors.
Is that normal? Or it depends on some settings of the page I'm creating the extension for? (www.google.com)
I've read maybe there could be a window.onerror set somewhere but I'm not able to find it. I tried a
window.onerror = null;
at the beginning of the background.js but nothing has changed.
What would you do to get the errors back?
UPDATE (Adding code)
This is the manifest.json:
{
"name": "Name",
"description": "Description",
"version": "0.1",
"manifest_version": 2,
"background": {
"persistent": false,
"scripts": ["js/background.js"]
},
"permissions" : [
"tabs",
"*://www.google.com/*",
"*://www.google.de/*"
],
"commands": {
"changeSearch": {
"suggested_key": {
"default": "Ctrl+Shift+A",
"mac": "Command+Shift+A"
},
"description": "Change."
}
}
}
The background.js start like this:
console.log("Start");
chrome.commands.onCommand.addListener(function(command) {
consTYPOTYPOTYPOTYPOTYPOTYPOle.log("catched");
...
I just discovered that errors are thrown if the TYPO is otuside of function(command) code, if I have TYPOs on the 1st or 2nd line.
The 3rd line is totally silent. No error. It just doesn't work.
That's weird to me!

The problem was a conflicting extension that was overriding mine.
Trying to disable all extensions and then re-enabling them, starting from mine, solved the problem.
Probably I made it to have higher priority respect to the conflicting extension (that has been enabled after).

Related

`alert` not showing in ManifestV3 background service worker

I am trying to make a chrome extension that alerts you in the tab that you are currently moving or highlighting. I have tried reading the chrome migrating to V.3 documentation and have come up with the following code, however, the alerts never appear. Does anybody know what I need to change or add?
// manifest.json
{
"manifest_version": 3,
"name": "Alert",
"version": "0.1",
"description": "alerts you when doing tab functions",
"permissions": ["tabs", "activeTab"],
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "background.js"
}
}
//background.js
chrome.tabs.onMoved.addListener(function () {
alert("You moved this tab");
});
chrome.tabs.onHighlighted.addListener(function () {
alert("You highlighted this tab");
});
Working directory:
.
├── background.js
├── manifest.json
alert() method cannot be used outside of the browser environment, you can use console.warn() or console.error() instead. But is not a good solution if you want to show an error message to the extension user, as they would never open the console.
If you would like a more user friendly approach use the following:
chrome.notifications.create({
type: 'basic',
iconUrl: '/images/image_if_any.png',
title: `Notification title`,
message: "Your message",
priority: 1
});
Also add "notifications" to "permissions" in your manifest.json file:
"permissions": [..., "notifications"]
alert is not defined in a service worker per specification so we'll have to use console.log
Also, I was looking in the wrong place for the alert messages. I needed to look at the service worker link in my unpacked extension page.

My chrome extension wont block mature websites

Ok so I am trying to get a chrome extension to block mature websites but for some reason it is giving me an error. Here is the error: "Unchecked runtime.lastError: '://.youtube.com' is not a valid URL pattern." and here is the code:
{
"name": "Video Testing",
"version": "1.0",
"description": "Video testing extention",
"permissions": ["webRequest", "webRequestBlocking","<all_urls>"],
"background": {
"scripts": ["background.js"]
},
"manifest_version": 2
}
here is background.js
const defaultFilters = [
"*://*.youtube.com"
]
chrome.webRequest.onBeforeRequest.addListener(
function(details) { return { cancel: true}},
{ urls: defaultFilters },
["blocking"]
)
So i hope someone could help me. Thanks!
You forgot a forward slash at the end of the URL. The provided code in the question would not work for me until I added it, and the error appears to come back without it.
const defaultFilters = ["*://*.youtube.com/"]
As stated above, you'll want to use the below format if you wish to block all associated youtube URLs (such as video or channel links) as opposed to just youtube.com
const defaultFilters = ["*://*.youtube.com/*"]

Getting ""Uncaught TypeError: Could not add listener" When Using " chrome.webNavigation.onCompleted.addListener"

When trying to use Chrome's WebNavigation.onCompleted to run background.js on a certain url I get the error
"Uncaught TypeError: Could not add listener".
For permissions in my manifest.json I have given the extension access to activetab and webrequest.
I have tried using other listeners like
chrome.browserAction.onClicked.addListener
and it worked perfectly. I am also using the latest version of chrome (v73).
background.js :
chrome.webNavigation.onCompleted.addListener(function(tab) {
var eurl = tab.url.split("/skill/");
if(eurl[0] === "https://www.duolingo.com") {
chrome.tabs.executeScript(tab.ib, {
file: 'jquery-3.3.1.min.js'
});
chrome.tabs.executeScript(tab.ib, {
file: 'duohelperinjector.js'
});}
}, {url: [{urlMatches : '*://duolingo.com/skill/*'}]});
manifest.json :
{
"name": "DuoHelper",
"version": "0.0.1",
"manifest_version": 2,
"description": "A Chrome Extension That Helps With Duolingo",
"homepage_url": "https://github.com/TechHax/DuoHelper",
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_title": "DuoHelper"
},
"permissions": [
"webNavigation",
"activeTab"
]
}
The error I'm getting:
Uncaught TypeError: Could not add listener
I would, with the extension working properly, like to have the chrome extension inject the javascript files on the active tab if its url is *://duolingo.com/skill/*.
See the documentation: urlMatches is a RE2 regular expression, not a URL match pattern.
Solution 1.
The correct RE2 expression would be 'https?://(www\\.)?duolingo\\.com/skill/.*'
Solution 2.
A better approach is to do a plain string comparison of the host name and path because it's much faster than using regular expressions and the documentation explicitly advises to use regexps only when absolutely unavoidable:
chrome.webNavigation.onCompleted.addListener(info => {
chrome.tabs.executeScript(info.tabId, {file: 'jquery-3.3.1.min.js'});
chrome.tabs.executeScript(info.tabId, {file: 'duohelperinjector.js'});
}, {
url: [{
hostSuffix: '.duolingo.com',
pathPrefix: '/skill/',
}],
});
Note how hostSuffix utilizes an implicit dot added by the API before the first component to match any subdomain of duolingo.com. Also, the callback parameter is not a tab, but a different object with tabId inside.
Solution 3.
Use declarativeContent API as shown in the documentation, but instead of ShowPageAction specify RequestContentScript, which despite the warning in the documentation actually works in the stable Chrome.

Chrome Commands API Global Attribute

I know about both common problems that people are having:
If you change the command keys in the manifest file you need to
remove and reinstall it for the changes to take effect.
Even if you do this, you may also need to scroll down on the
extensions page, click the keyboard shortcuts link, and set the
commands manually.
About six months ago, I successfully implemented global keyboard commands with a Chrome Extension on the Chrome OS platform, it seems as though one of their updates has broken this feature... perhaps someone knows of a workaround? With the code below, if you load as an unpacked extension, then scroll down the chrome://extensions page to manually click the "Keyboard Shortcuts" and assign the command, you will see that you have the option to set it to run in either Chrome or Global... Chrome works, but if you assign Global, nothing happens (both inside Chrome and outside when using the file system or apps)... any ideas?
background.js
chrome.commands.onCommand.addListener(function(command) {
if (command == "toggleHighContrast") {
chrome.accessibilityFeatures.highContrast.get({},function (callback){
var value = true;
if (callback.value) value = false;
chrome.accessibilityFeatures.highContrast.set({value:value});
});
}//Ctrl+Shift+A
});
manifest.json
{
"manifest_version": 2,
"name": "High Contrast",
"short_name": "contrast",
"description": "",
"version": "0.0.1",
"minimum_chrome_version": "38",
"offline_enabled": true,
"commands": {
"toggleHighContrast": {
"global":true,
"description": "Toggle High Contrast Mode"
}
},
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [
"accessibilityFeatures.read",
"accessibilityFeatures.modify"
]
}

Chrome experimental extension gives error?

I'm trying to run an experimental Chrome extension (found here: https://github.com/GoogleChrome/chrome-app-samples/tree/master/serial/ledtoggle ) and can't seem to find the reason for this error in 'launch.js'. The app is setup the exact same way as other apps which run successfully, but this one in particular seems to refuse. The key files are below, and all the others are the same as you'll find in the repo. Experimental APIs & platform apps are enabled. Any help is appreciated, and I will mark the answer!
Error in event handler for 'experimental.app.onLaunched': Cannot call method 'create' of undefined TypeError: Cannot call method 'create' of undefined
at chrome-extension://mkadehbifepfhnemaiighgighppmjgnp/launch.js:2:21
at chrome.Event.dispatch (event_bindings:237:41)
at chromeHidden.registerCustomHook.chrome.experimental.app.onLaunched.dispatch (experimental.app:32:39)
at Object.chromeHidden.Event.dispatchJSON (event_bindings:151:55)
Manifest.json:
{
"name": "Serial Test",
"version": "1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["launch.js"]
}
},
"icons": {
"16": "icon_16.png",
"128": "icon_128.png"
},
"permissions": ["experimental"]
}
launch.js:
chrome.experimental.app.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
width: 400,
height: 400
});
});
There is no chrome.app.window property, it is undefined. It seems that the idea is to open a new browser window, the correct code would be:
chrome.windows.create({
url: 'index.html',
width: 400,
height: 400
});
Edit: Apparently the chrome.app.window API will be available in future Chrome versions (I can see it in Canary). It isn't there in Chrome 21 however.

Categories