Is it possible to put an icon in the Mac dock for a chrome extension I'm working on.
Here's the extension code just for reference. manifest.json:
{
"manifest_version": 2,
"name": "Habitica",
"author": "Sam Dale",
"description": "A launcher to quickly get to Habitica. Especially great for Mac users.",
"version": "1.0",
"icons": {"16": "habitica-logo-16.png", "128": "habitica-logo-128.png", "300": "habitica-logo-300.png"},
"browser_action": {
"default_icon": "habitica-logo-128.png",
"default_title": "Habitica"
},
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({ url: "https://habitica.com/#/tasks" });
});
There is no API to interact with the dock. So, no easy way.
I can think of several complicated ways to do it, but in general I would recommend avoiding that idea.
One can add a shortcut to a non-existing webpage, say, https://launch-my-awesome-extension.horse/, and intercept it with webRequest API.
Note that one can't use a link to a Chrome extension page to sidestep webRequest requirements: such links are likely to be ignored if you try to open them via a shortcut due to elevated privilege of chrome-extension:// pages.
Write a companion native app and use Native Messaging API with all the usual consequences.
Complication: Chrome can only initiate Native Messaging, you cannot launch an app to tell Chrome something; so there must be some resident component already launched when you click the dock icon.
Both are cumbersome and not really a good idea.
Related
I am experiencing a weird issue with the Debugger on VS Code, I am following this guide: https://github.com/AdaCore/ada_language_server/wiki/getting-started but can't make it work at all. I have installed the Native Debug extension, gdb is installed...etc. I have been working with Ada for some time but just thought about starting to debug my projects. I am first trying to make it work with a simple project hello_world, like explained on the guide.
I can start the debugger, but it won't show anything, not the variables or the call stack, nothing - just which breakpoints I did toggle. The controls that allow you to step through the code are also empty, as you can see here: https://i.stack.imgur.com/eJ7dC.png
The content of my launch.json is:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Debug",
"type": "gdb",
"request": "launch",
"target": ".objs/hello_world",
"cwd": "${workspaceRoot}",
"valuesFormatting": "parseText",
"preLaunchTask": "ada: Build current project",
}
]
}
The rest are also the same than the guide's. Any help would be greatly appreciated! I am a bit lost and don't know what to do.
Thank you.
Edit: Just in case, I did it everything from scratch again, same result. Can't achieve to make it work, debugger controls and variable/watch windows are always empty.
Any ideas?
Thanks!
Using Debugger For Firefox in VS Code, and running an instance of LiveServer for my HTML/JS application on localhost, breakpoints do not work when opening the site in Firefox or Firefox Developer Edition.
VS code has generated the launch.json for debugging in Firefox for my project, with the relevant part here:
{
"name": "Launch localhost",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost/index.html",
"webRoot": "${workspaceFolder}"
},
The issue is that when I then run this setup, Firefox cannot find the page, and even if it does, breakpoints do not work. The equivalent of the above for Chrome works, however.
I resolved this issue by changing the settings on LiveServer so that it always works on localhost port 8080, it won't just chose a random port when its active. This can be done by adding the following to LiveServer's settings.json file:
"liveServer.settings.port": 8080,
In the launch.json code included in the above question, the following line is causing the issue:
"url": "http://localhost/index.html",
This should instead be
"url": "http://localhost:8080",
Once this change is made, and all the Firefox configurations suggested under 'Attach' on this page are made and LiveServer is active for your project, the debugger should work for Firefox.
I have a rather simple setup:
- parcel 1.12.4
- vs code 1.43.2
- chrome 80.0.3987.149 on macOS
- chrome debugger extension
- node v13.11.0
- a simple index.html that uses main.js which imports moment.js and a module of mine.
Snippet from launch.json
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:1234",
"webRoot": "${workspaceFolder}"
}
When I serve everything via parcel index.js it compiles and runs fine.
When I set a breakpoint in main.js , it is grayed out and ignored.
When I resort to debugger;, this breakpoint works and I can also set other breakpoints via VS Code or Chrome.
Most of the time, the breakpoint shows up in a tab main.js read only inlined content ... – the extract of the sourcemap/bundle which is a bit weird but understandable.
Sometimes the breakpoint shows up in dist/main.fb6bbcaf.js, essentially forcing me to debug inside the generated bundle.
This is a bit inconsistent and I did not find any pattern what happens when. I plan to use parcel/javascript with a number of students and I anticipate that they will be confused.
What can I do to get a more consistent debugging experience?
I recently got an ergonomic Sculpt keyboard that I use with my Macbook. I managed to configure some handy keyboard shortcuts for e.g. moving between screens but I'm failing miserably at configuring "Next" and "Previous" buttons to use with Spotify.
I tried first Karabiner but it's apparently missing both options. So I started digging in keyboard settings. In Keyboard -> Shortcuts -> App Shortcuts I'm able to add manually a new shortcut for moving to the next song. And it works but only when I'm on the screen with Spotify. But the whole point of this shortcut is to switch between songs while doing something else, without even looking at Spotify app. And that I cannot configure somehow.
Has anyone done something like this before and can recommend a solution? Thanks in advance.
Karabiner can easily do this though. Make a complex modification rule
bind some keybind to keybind fastfoward to skip next song and rewind to go to previous track. play_or_pause for obviously playing or pausing.
in fact i made a simple test to see if this works or not
{
"description": "Spotify next and prev button map",
"manipulators": [
{
"type": "basic",
"from": {
"key_code": "n"
},
"to": [ {
"key_code": "fastforward"
} ]
}
]
},
I make the letter n here to be fastfoward you can edit as you like
I just started out with Google Chrome extensions and I can't seem to log to console from my background js. When an error occurs (because of a syntax error, for example), I can't find any error messages either.
My manifest file:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"pageCapture",
"tabs"
]
}
background.js:
alert("here");
console.log("Hello, world!")
When I load the extension, the alert comes up but I don't see anything being logged to console. What am I doing wrong?
You're looking at the wrong place. These console messages do not appear in the web page, but in the invisible background page (ManifestV2) or service worker (ManifestV3).
To view the correct console open devtools for the background script's context:
Visit chrome://extensions/ or right-click the extension icon and select "Manage extensions".
Enable developer mode
Click on the link named background page (ManifestV2) or service worker (ManifestV3).
Screenshot for ManifestV2 extensions:
Screenshot for ManifestV3 extensions:
I had the same problem, in my case the logging was set to "Hide all" in the console tab in Chrome Developer tools.
I had not even realised this was an option, and I can't remember turning it off
For followers who wish to see the debug console for a "content script" of their chrome extension, it is available by doing a normal "show developer console" then use the dropdown arrow to selects its "javascript environment" then you'll have access to its methods, etc.
additionally
if you want to see content_script js file ( when "background" property is not set ) in manifest.json
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["popup.js"],
}]
"browser_action": {
"default_icon": "icon_32.png",
"default_popup": "popup.html"
}
then right click on extension icon and click on Inspect popup and developer window opens with popup.html opened , there you see console tab.
Similar to the answer of Michiel i also had a funny console configuration: A filter i dont remember setting:
After clearing the filter i saw the messages.
I had this problem as well. It seems as though my webpage was not updating to the newly saved script. This was solved by pressing Ctrl + refresh (or Ctrl + F5) in the chrome browser.
If we want to read messages printed to console from the popup page, we can click the extension icon to open the popup page, then do right click on the popup page anywhere, a dropdown menu will display, we just click "Inspect" menu to open the developer tool. Notice that the popup page must be keep opening. If it is closed(by window.close()), the developer tool will be closed too.
The other answer(s) work(s) for background.js but, if you are looking for console.logs from the popup then you can try:
var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');
I was developing using cra, and this worked for me.
For those developing extensions for Firefox:
TL;DR version: you need to use Ctrl+Shift+J to call up the browser console window, and click on the settings icon on the top right-hand corner and make sure that "Show Content Messages" is checked.
Longer explanation from a related stackoverflow question: How do I see the console.log output of a background script in a Firefox WebExtension?