Why after installing Chrome app, it fires on new tab? - javascript

I created a Chrome app you can try it here
https://chrome.google.com/webstore/detail/style-scout/chbdclbnkfcocaolknbjmmppendkmebh
but after I install it and I open a new tap the app fires immediately and only for the very first time... why is that happening?
manifest is
{
"background":
{
"scripts": ["background.js"]
},
"browser_action":
{
"default_icon": "icon-128.png",
"default_title": "Style Scout"
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
"name": "Style Scout",
"short_name": "Style Scout – Fonts & Colors Finder",
"description": "Fonts & Colors Finder",
"homepage_url": "https://stylescout.org",
"icons":
{
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png"
},
"permissions": ["tabs", "http://*/*", "https://*/*", "storage"],
"version": "0.612",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["activate-np-chrome.js"]
}],
"web_accessible_resources": ["np-chrome.js"]
}
and background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {
file: "np-chrome.js"
})
});
np-chrome.js is the actual full script of my app...

ok I completely removed this part
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["activate-np-chrome.js"]
}],
"web_accessible_resources": ["np-chrome.js"]
and now it works, because I didn't know that content_scripts actually inject and fire the script for every single tab ever, whereas i just needed to fire my script when the user clicks my browser button

Related

Problem deploying Safari web extension to Mac App store

I have followed the steps to deploy the safari extension to mac app store by creating an archive and then validating it. I received no error when validating. However when trying to "Distribute App" The following error is coming up in the last stage. -"Corrupted manifest file. The manifest.json file could not be read in Safari extension bundle"
The extension build is running as per expectations locally.
Please help
My manifest.json
{
"author": "Author Name",
"background": {
"page": "index.html",
},
"version" : "1.0",
"browser_action": {
"default_icon": "assets/img/logo-64-disabled.png",
"default_title": "Title"
},
"content_scripts": [
{
"js": ["assets/js/index.js", "assets/js/content.js"],
"matches": ["<all_urls>"]
}
],
"content_security_policy": "script-src 'self' https://cdnjs.cloudflare.com; object-src 'self'",
"default_locale": "en",
"description": "Description",
"homepage_url": "https://example.com",
"icons": {
"128": "assets/img/logo-128.png",
"16": "assets/img/logo-16.png",
"32": "assets/img/logo-32.png",
"48": "assets/img/logo-64.png",
"64": "assets/img/logo-64.png"
},
"manifest_version": 2,
"name": "Name",
"options_ui": {
"open_in_tab": false,
"page": "assets/options.html"
},
"permissions": [
"contextMenus",
"tabs",
"activeTab",
"webNavigation",
"storage",
"<all_urls>",
],
"short_name": "Name",
"web_accessible_resources": ["assets/*"]
}

Run content script without loading active tab

How can I run the content script without reloading the active tab?
The content script only works when I refresh the active tab.
Manifest.js
{
"name": "CMS",
"description": "A simple CMS solution that can update a website contents and images without modifying the current website structure.",
"options_page": "options.html",
"background": {
"page": "background.html"
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": "icon48.png"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
"js": ["contentScript.bundle.js"],
"css": ["content.styles.css"]
}
],
"web_accessible_resources": [
"content.styles.css",
"icon128.png",
"icon48.png"
],
"manifest_version": 2,
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
content_script
let paragraphs = document.querySelectorAll('*');
for (const elt of paragraphs) {
elt.style['border'] = '1px solid green';
}

How to ensure a chrome extension does not just work on local HTML files

I have been working on a chrome extension which is intended in part to pull public data from certain pages with at a domain similar to https://secure.state.gov/. For development, I have saved some of the HTML files locally and have been testing with those. Now that I have it working, I would like to try the extension with some live public pages. But when I click the extension at that domain, all that appears is the default google extension menu, and not the popup.html that I created which works local pages. This behavior is the same on any webpage other than the local HTML pages.
In the manifest file, I have tried adding "" to both permissions and content_scripts.
"name": "APPNAME!",
"version": "1.0",
"description": "DESCRIPTION REDACTED!",
"permissions": ["activeTab", "declarativeContent", "storage" , "*://secure.state.gov/*", "<all_urls>"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"options_page": "formMenu.html",
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2,
"content_security_policy": "script-src 'self' https://code.jquery.com https://cdnjs.cloudflare.com https://stackpath.bootstrapcdn.com https://use.fontawesome.com; object-src 'self'",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["payload.js"],
"run_at": "document_end"
} ]
}
No error messages result. I simply get the default extension menu ("This site can read and change site data >", "Options", "Remove from Chrome", "Hide in Chrome Menu", "Manage Extensions", Inspect Popup)
To set up your Chrome extension for testing with local HTML files, and with particular domains, set it up your background.js file as follows:
'use strict';
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
hostEquals: ''
},
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
hostContains: 'secure.state.gov'
},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});

Access DOM inspector from Chrome extension script

I'm writing a Chrome plugin for my needs. I'd like to be able to select HTML elements like Adblock Plus do to be able to watch changes on the element and its children. I use MutationObserver in my content.js.
How can I to make it work the way I want? I'd like to trigger it from the popup menu. I see there's this API: chrome.devtools.inspectedWindow, probably I can make use of it somehow?
manifest.json
{
"manifest_version": 2,
"name": "PageFontStyle",
"version": "1.0",
"description": "Changes font style on page",
"devtools_page": "devtools.html",
"icons": {
"128":"icon128.png",
"48":"icon48.png",
"16":"icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html",
"default_title": "Page Font Style"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-3.3.1.min.js", "content.js"],
"css": ["content.css"]
}
],
"permissions": [
"tabs",
"activeTab"
]
}

Chrome extension background.js file reload

EDIT
My chrome extension calling an api service in the background.js file and i can get the data. But after closing the browser window, i cant get the data from the api service in background.js file. It showing null value. When go to the chrome://extensions/ and reload the extension I can get the data.
When close the browser window, the data fetched is being reset and when open the browser, data not fetching. Data can be fetched from the api only after reloading the extension.
Why happening so. Does any one have an idea about this?
This is my manifest.json file
{
"manifest_version": 2,
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"name": "Test",
"short_name": "Test",
"description": "Test",
"version": "3.0.0",
"background": {
"scripts": [
"build/background-bundle.js"
]
},
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"cookies",
"storage",
"activeTab",
"http://*/",
"https://*/"
],
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": [
"build/content-bundle.js"
],
"run_at": "document_end"
}],
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"content_security_policy": "script-src 'self' https://www.google-analytics.com/analytics.js https://api.algorithmia.com/v1/algo/algo://nlp/SummarizeURL/0.1.1; object-src 'self'"
}
You can't reload the background file based on anything other than reopening the browser or reloading the extension manually. What you should instead do is have a content script tell background.js to run getTaxonomyList again when the user log in happens.
background.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.userLoggedIn) {
getTaxonomyList().done(function(list) {
sendResponse(list);
});
}
})

Categories