My pageAction icon remains inactive in Chrome webextension - google-chrome

I am writing a webextension for Chrome and Firefox that uses the Page Action model. In the manifest.json I provide match rules for the URL so that it only shows on a specific URL. This works fine in Firefox, but the icon stays inactive all the time in Chrome. Here's my Chrome manifest.json, which is the same as the Firefox one but without the firefox specific aplications property. The url of the webpage when loaded is exactly the same in Chrome as in Firefox.
{
"manifest_version": 2,
"name": "MyExtension",
"version": "0.1.1",
"description": "A description",
"permissions": [
"activeTab",
"storage"
],
"page_action": {
"default_title": "MyExtension",
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"show_matches": ["https://example.com/#*"],
"hide_matches": ["https://example.com/#*/*"]
}
}

Related

How do I make a Chrome extension run in the background?

I am currently building my first Chrome extension with React.
It displays a counter that increments by one every second but whenever I close the extension popup or open it in a new tab the count starts from zero, how can I make it run in the background so it doesn't start all over?
Here is my manifest.json
"manifest_version": 2,
"name": "Chromeee",
"description": "Lorem ipsum chromeeeeee",
"version": "1.0",
"icons": {
"16": "icons/icon-16.png",
"48": "icons/icon-48.png",
"128": "icons/icon-128.png"
},
"permissions": ["activeTab", "tabs"],
"browser_action": {
"default_popup": "index.html"
}
}

Chrome Extension, can't visualize the icon in the toolbar

First of all, I'm trying to use the new manifest 3, but there are no samples out there so it's difficult to understand how develop a chrome extension.
I'm trying to build a basic Hello world app, and i want to have an icon on the toolbar so when the user clicks it, a message "hello" shows up on the page.
This second part is easy as I already know how to inject the code, but the problem is that I cannot seem to see the app icon in my tool bar...
{
"manifest_version": 2,
"name": "My App Name",
"version": "1.0.0",
"description": "do something",
"short_name": "My App Name",
"permissions": ["activeTab", "declarativeContent", "storage", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["src/bg/background.css"],
"js": ["src/bg/background.js", "js/jquery/jquery.min.js"]
}],
"browser_action":
{
"default_title": "My App Name",
"default_icon":
{
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png"
}
}
}
not sure what I need to add to see the icon
FYI I'm testing it locally ...i'm not sure if the local version acts differently from a packeged final version...

using web cam in chrome extension

im trying to create a chrome extension for my company's web app, but upon reading the docs i couldnt find any permission or chrome api that allows a chrome extension to access the webcam, all i could see were permissions to record screens. is there anyway a chrome extension can access a users webcam? or i would have to look for other means.
my manifest.json:
{
"name": "Intaclips",
"description": "Intaclips chrome extension for intaviewer",
"version": "0.1.0",
"manifest_version": 2,
"icons":{
"19": "./icons/icon-19.png",
"32": "./icons/icon-32.png",
"48": "./icons/icon-48.png",
"128": "./icons/icon-128.jpg"
},
"background": {
"scripts": ["./background.js"]
},
"options_page": "./options.html",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"unlimitedStorage",
"activeTab",
"clipboardWrite",
"cookies",
"storage",
"https://www.app.intaviewer.com/*",
"https://www.google.com/*",
"https://www.linkedin.com/*"
],
"content_security_policy": "script-src 'self' https://static.opentok.com/v2/js/opentok.min.js; object-src 'self'"
}
Help in solving this issue will be well appreciated
I think you have to use a third party library like "p5.js"

Chrome extension is corrupted

I have problem with my extension. It is working for me unpacked and when I download it from Chrome store.
However, some users reported that after update extension is corrupted. That's happen after they update it to newer version.
Difference between old and new version is background page and some logic.
I was able to replicate that issue, by packing extension and than drop it into extensions tab. After that I saw the same message as extension users. I also tried that with another extensions and everything worked fine, so maybe there is some issue in manifest file.
{
"manifest_version": 2,
"name": "Cryptocurrency Price Tracker",
"description": "This simple extension allows you to track price changes of Bitcoin and other cryptocurrencies.",
"version": "2.5",
"icons": {
"16":"icon16.png",
"48":"icon48.png",
"128":"icon128.png"
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"storage",
"notifications",
"https://api.coinmarketcap.com/v1/*"
]
}
I use background page, not event page. So maybe I should add something in the manifest...
P.S. Packaging doesn't work for older version of extension... One more important thing. Users reported that after clicking on options page they saw that error. It didnt happend in my case, when I drag and drop extension file, I saw error immediately.
You need to put in a link to an update url in the manifest. The problem was mentioned in this forum:
https://productforums.google.com/forum/?hl=en#!topic/chrome/kGgLwnrDKpQ;context-place=forum/chrome
So you add update_url into your manifest. It can be any valid url if you are not making use of the feature. So like this:
"name": "Cryptocurrency Price Tracker",
"description": "This simple extension allows you to track price changes of Bitcoin and other cryptocurrencies.",
"version": "2.5",
"icons": {
"16":"icon16.png",
"48":"icon48.png",
"128":"icon128.png"
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"storage",
"notifications",
"https://api.coinmarketcap.com/v1/*"
],
"update_url": "http://www.example.com/update.xml"

How do I specify my extension is an 'app' in the Chrome Web Store?

I've made a Chrome extension and set a browser_action in my manifest. This puts a little icon in the browser bar, and then clicking that runs background.js which opens the app in a new tab.
However, I notice that on the web store, my app icon is listed inside a little jigsaw piece, and it doesn't appear on the Chrome New Tab page like other 'apps' I've installed.
Do I need to set something specific in my manifest.json file for it to be listed as an 'app' instead of an extension? Is there any benefit to even making it an app apart from removing the jigsaw piece and having it listed on the new tab page?
Here's my manifest.json file:
{
"manifest_version": 2,
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"name": "Super Simple Tasks",
"description": "A very simple tasks app that uses localStorage.",
"version": "1.1",
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"permissions": [
"tabs",
"storage"
],
"offline_enabled": true,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "img/icon19.png",
"default_title": "Super Simple Tasks"
}
}
You need to specify that it is an app:
"app": {...},
This will explain how to format your manifest: https://developer.chrome.com/trunk/apps/manifest.html