How to add icon to chrome extension? - javascript

I've attempted this guide from Google, this stack post, and this stack post. I followed what I read but somehow it's not updating the icon when I see it in my extensions. Someone mentioned a dashboard, but my extension a brief script I've saved locally, and update locally when testing. This is my manifest:
{
"manifest_version": 2,
"name": "Submit Server Glory",
"version": "1.1",
"content_scripts":[
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"browser_action": {
"default_title": "Submit Server Glory",
"default_icon": "money128.jpg"
},
"icons": {
"16": "money16.jpg",
"48": "money48.jpg",
"128": "money128.jpg"
},
"permissions": ["tabs"]
}

I've had this issue aswell, you might be using the new dashboard which doesn't give the option to change the extension icon. I think it may not update since its new and still in progress. If you wanted to set your icon you can opt out, edit your extension, selected extension icon, update, then opt in again to the new dashboard with your extension icon set. However, it resets whenever you push a new update which is quite annoying

It looks like PNGs work and JPEGs explicitly DON'T work, which is a strange constraint for such a popular image.

Related

Edge extension with manifest_version:2 not works

I wanted to start to make an edge extension.
I downloaded the official samples from github.
Okaay.... I couldn't add it to edge because I got error:
"The 'manifest_version' key must be present and set to 2 (without quotes)."
I added it. But the samples are not working. I can add it to edge now, I feel I have problem with manifest or the content js script, because I tried to create an own from zero, but content.js not works. The background js run once when I add the extension. I tried to send a message from background.js to content.js, but nothing happened...
I tried to add alert to content.js, where I listen the message and I tried to add an alert here without any magic. But nothing... Edge doesn't show errors in the console.
Thanks in advance. :)
Here is the manifest:
{
"name": "Quick Print",
"version": "1.0.0.0",
"author": "Microsoft",
"manifest_version": 2,
"icons": {
"24": "icon_24.png",
"48": "icon_48.png"
},
"permissions": [
"tabs",
"https://facebook.com/*"
],
"browser_action": {
"default_icon": {
"20": "icon_20.png",
"40": "icon_40.png"
},
"default_title": "Print!"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["https://facebook.com/*"],
"js": ["content.js"]
}]
}
Perhaps you are using the latest version Microsoft Edge browser (Chromium based), but the extension is for the legacy version Microsoft Edge. In this scenario, it will show the "The 'manifest_version' key must be present and set to 2 (without quotes)" error.
To create a Microsoft Edge (Chromium) Extensions, you could check this tutorial:
Getting Started With Microsoft Edge (Chromium) Extensions
And, you could download the official simple extension sample by click the "Completed Extension Package Source for This Part" hyperlink in this link.

Is there any way to render from nodejs server into a chrome extension popup?

{
"manifest_version": 2,
"name": "Music Player",
"version": "1.0.0",
"icons": {"128": "icon_128.png"},
"description": "Plays music in background of the web-browser",
"browser_action": {
"default_icon": "icon.png",
"default_popup": //"popup.html" works but not "https://localhost:5500/popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["activeTab"],
"content_security_policy":"script-src 'self' https://code.jquery.com; object-src 'self'"
}
I have made a music player that takes in a youtube-playlist as input and plays it, problem here is that I am not able to render the page inside the Chrome Extension popup but if I try to do the same with a static html page it works.
My current approach is to render everything via server. If you have any suggestions please let me know. It is a college project where we are bound to use jQuery AJAX for now.
Another way could be to have a static HTML but send Form data via AJAX but I have no idea of how to send data and receive data. My backend(nodeJS) basically takes the Youtube Playlist URL and using handlebars it renders the title, thumbnail, songfileurl and the artist names in place!
Willing to go any level of complexity, please help.

Is it possible to ask for password when enable false or removing chrome extension?

I'm kinda new in developing chrome extension. My extension is actually about blocking some web pages, where user can insert domain names of websites that he/she want to block so that children cannot see the page, such as adult content pages, etc.
But I'm facing a problem with the question "How if the children unable or remove the extension, or even unchecked the 'allow in incognito'?" Then it would all be useless. So I am searching for a way to solve this problem, probably with using password before unable/remove the extension/unchecked the 'allow in incognito'.
Here is my manifest file:
{
"manifest_version": 2,
"name": "AmanNet",
"description": "Extension ini memblok halaman yang dianggap berbahaya secara konten html.",
"version": "1.0",
"browser_action": {
"default_icon": "icon_16x16.png",
"default_popup": "popup.html",
"default_title": "AmanNet"
},
"options_page": "pengaturan.html",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"icons": {
"128": "icon_128x128.png"
},
"permissions": [
"http://*/*", "https://*/*", "tabs"
],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": ["http://*.google.com/*","https://*.google.com/*"],
"js": [
"content.js"
],
"run_at": "document_start",
"all_frames": false
}
]
}
How am I going to do this? Should I add something to manifest, or else? Please help.
Your problem is not solvable with a Chrome Extension in the general case.
Google has made every step possible in the direction of making the user empowered to remove unwanted extensions. This is because extensions are a notorious malware vector.
For instance, there is a method for external software to install their extensions through the registry. Since it was introduced, the following measures were taken:
Only extensions hosted on the Web Store are allowed (to enable takedowns by Google)
The user will be expressly asked whether they want that extension activated.
If they decline or uninstall the extension, it will be blacklisted on that profile and cannot be installed via registry again.
There are exceptions to the rule: enterprise installs. An extension on ExtensionInstallForcelist domain policy cannot be uninstalled or deactivated. This is, however, not an option for most users.
You can do some clever hacks with 2 separate extensions and management API, but you can't prevent uninstall, only detect it.
Note that Chrome includes a feature called "supervised users". However, it has its problems - it deals with the question of unwanted extensions/apps by just blanket banning all of them. If I was to set up parental control, I wouldn't accept a solution that would not allow AdBlock.
Bottom line: there is no chance preventing extension uninstall by extensions themselves, and no "good" ways of doing so with external programs. Custom parental control can only be effective if implemented outside Chrome (and even then questionably effective).
Typically you won't be able to prevent removal of any extensions. Chrome does have a "Kiosk" mode which is designed to be tamper proof but is only for Chrome OS: https://developer.chrome.com/apps/manifest/kiosk_enabled
There is no protection against removal. But you could use some steganography/obfuscation technics, like embedding your extension in another one.

How to create a chrome extension without image on toolbar

After reading and understanding how an extension works I tried to create a simple program. Unfortunately, I hit an obstacle because I don't know how to create my extension without image.
I think it is possible because I've seen many extensions without one. So if anyone knows how please help me out. I believe my problem lies in the manifest.json file:
{
"name": "name",
"version": "0.1",
"manifest_version": 2,
"description": "description",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["popup.js"]
},
"permissions": ["tabs", "<all_urls>"]
}
Just remove:
"browser_action": {
"default_icon": "icon.png"
},
from your manifest.json. You need to pick one OR none (none is your case) of:
"browser_action": {...},
"page_action": {...},
The accepted answer no longer works (because of new behavior in Chrome). There is no way to not show your icon that's a user's choice now.
See this answer for more details

Problems with Manually Installing an Extension

Okay, so here's my problem:
On my home computer, I have a Google Chrome Extension installed - WXFZ's \Code. This extension works perfectly, I use it every day for work purposes. However, I guess the developer gave up on it, because it can no longer be found on the Google Extensions download page.
I'm trying to transfer that extension from my home computer to my office computer. I have the extension folder on my work computer and I've tried dragging and dropping it into the extensions page to install it, but I receive an error:
"Could not load extension from 'U:\Downloads\pekinghlicdifnlgafajjohhoiochfdh\2.1_0'. The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details."
I'm not entirely sure what that means, but I've copied the contents of the manifest folder below. I've tried changing some things around in the manifest file, but nothing would work :/
{
"app": {
"launch": {
"local_path": "bscode.html"
}
},
"background_page": "storage.html",
"content_scripts": [ {
"all_frames": true,
"js": [ "js/jquery-1.4.4.min.js", "js/bscode.js", "js/bscode-cs.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"description": "Simple \\code and \\\\macro engine for common web-forms.",
"icons": {
"128": "icon_128.png",
"16": "icon.png",
"48": "icon_48.png"
},
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQClVb9xGcyZp3P4Fe+rpjGUqVrvRq8rqQl278gMjFzmxqD65cu7uf/erOBlFWbAc6YK15yvgnsYn+HDYvoSV4shajLAnytek7CI35nia5AnYACJsXW+JrfoT9pEgK9Zd4fE1XFr8bNCzhwKeoupH+gtMdvJ9lqAN4Xj/Tam5+QvzQIDAQAB",
"name": "wxfz\u2019s \\code",
"permissions": [ "http://*/*", "https://*/*", "tabs" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": 2
}
Any advice on this problem, I'd appreciate it. Like I said, the extension still works; I was assuming there has to be a way to get it to work on my other computer :/
UPDATE
My apologies, the updated source code is :
{
"app": {
"launch": {
"local_path": "bscode.html"
}
},
"background_page": "storage.html",
"content_scripts": [ {
"all_frames": true,
"js": [ "js/jquery-1.4.4.min.js", "js/bscode.js", "js/bscode-cs.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"description": "Simple \\code and \\\\macro engine for common web-forms.",
"icons": {
"128": "icon_128.png",
"16": "icon.png",
"48": "icon_48.png"
},
"key":"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQClVb9xGcyZp3P4Fe+rpjGUqVrvRq8rqQl278gMjFzmxqD65cu7uf/erOBlFWbAc6YK15yvgnsYn+HDYvoSV4shajLAnytek7CI35nia5AnYACJsXW+JrfoT9pEgK9Zd4fE1XFr8bNCzhwKeoupH+gtMdvJ9lqAN4Xj/Tam5+QvzQIDAQAB",
"name": "wxfz\u2019s \\code",
"permissions": [ "http://*/*", "https://*/*", "tabs" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": "2.1"
"manifest_version": 2
}
In the original post I had:
"version": 2
I see now that was incorrect, it was supposed to be 2.1, so I changed that back, along with making the changes you suggested.
The error you get is asking for a "manifest_version": 2 property in your manifest.json. So, at the very least youneed to:
Change "version": 2 to "version": "2" (version must be a string value).
Add "manifest_version": 2 (2 without quotes - it's a number value).
Change "background_page": "storage.html", to "background": {"page": "storage.html"},.
Beware though that some features may break and need refactoring as well (in order to conform with manifest v2).
UPDATE:
It turned out there were quite a few things that needed to be changed in order for the extension to be compliant with Manifest V2 (and functional). The re is no point in posting the code here or list every single modification in detail, so I'll try to summarize and focus on the "nature" of the modification (see further down for a link to the updated source code):
The major source of problems was the fact that the new Content Security Policy (CSP) that applies to Google Chrome Extensions does not allow eval and inline scripts/event listeners. To circumvent this the following changes were necessary:
Declare a CSP in the manifest that allows eval
("content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'").
Unfortunately(?) there is no way to relax the policy against inline scripts.
In the background page (namely storage.html, an inline script was used, so I ended up moving the code to an external file (background.js) and including the JS scripts like this:
"background": {
"persistent": true,
"scripts": [
"js/bscode.js",
"js/background.js"
]
},
The old jquery-1.4.4 (which relies on inline scripting) was a no go as well. So I had to replace to the less old jquery-1.7.2 (I tried using the latest versions of jquery and jquery-ui, but they didn't play well with the rest of the code, so I rolled back to the oldest version that didn't rely on inline scripting). This change affected both the content_scripts declaration and bscode.html (where the user-defined macros are defined and edited).
Migrating to jquery-1.7.2 required porting all occurrences of the deprecated .live() to the equivalent syntax using .on(). (Luckily, this only affected one file: chrome-ui.js)
bscode.html had 2 inline scripts that needed to be moved to an external file (and placed at the right place inside the body, since the code calls document.write.
bscode.html had a lot of inline event listeners, which would not work. Furthermore, elements (which also contain inline event listeners) are inserted dynamicaly into the DOM, so the solution had to take that into account as well.
I tackled both the problems by using an external JS file that utilizes a MutationObserver to listen for node insertions and convert any inline event listeners to "attached" event listeners (by means of addEventListener()).
Finally, to make things easier, I set-up bscode.html as the Options Page for the extension, so you can quickly bring it up from the chrome://exrensions page.
(I hope I didn't leave something out...)
The refactored (and fully functional as far as I can tell) source code of the extension can be downloaded here.

Categories

Resources