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

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"
}
}

Related

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...

Can I have a splash page show when I search a URL in a chrome extension?

I want to show a splash page once I enter a URL and search. For example, if I go to https://youtube.com, then my Chrome extension will first show my splashpage.html. I was researching the override pages in the documentation, but it seems that I can only use "chrome_url_overrides" for new tabs, bookmark manager, and history.
My manifest.json has a newtab that opens up my "splashpage.html" when a new tab is entered. I would like to do this same action, but before the initial URL is loaded.
manifest.json
{
"manifest_version": 2,
"name": "Splash",
"version": "1",
"author": "LC",
"browser_action": { "default_title": "Have a good day", "default_popup": "popup.html" },
"chrome_url_overrides" : { "newtab": "splashpage.html"},
"permissions": ["activeTab"]
}

My pageAction icon remains inactive in Chrome webextension

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/#*/*"]
}
}

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"

Adding html pages on manifest.json

Im creating a chrome extesion that calls 4 different html pages. The user will interact with a menu(menu.html), and according to the button pressed on the extension will take him to another page.
Do i need to put all my html files on the manifest.json? If yes, how can i add the secondary pages? everything is done but how can i put this together in the manifest?
i have all this files on my folder;
menu.html
pageone.html
pagetwo.html
pagethree.html
visual.css
{
"manifest_version": 2,
"name": "extension test",
"version": "1.0",
"description": "App test",
"browser_action": {
"default_popup": "popup.html"
},
"icons": {
"16": "icon.png"
},
"permissions": ["tabs", "<all_urls>"]
}
thanks!