Run content script without loading active tab - javascript

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';
}

Related

Chrome Extension: Jquery Not Working In Content Script

I am not sure why my jquery is not loading properly in my content script even though I have the jquery.js file under the resources in the web accessible resources. I keep getting this error: "ReferenceError: $ is not defined". Would appreciate any help, thank you.
manifest.json
{
"name": "Work Smarter",
"description": "Work Smarter - Elimanate Distractions, Be Productive",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting", "tabs"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/16x16.png",
"32": "/images/32x32.png",
"48": "/images/48x48.png",
"128": "/images/128x128.png"
}
},
"icons": {
"16": "/images/16x16.png",
"32": "/images/32x32.png",
"48": "/images/48x48.png",
"128": "/images/128x128.png"
},
"web_accessible_resources": [
{
"resources": ["contentscript.css", "images/neverGiveUp.png", "jquery.js"],
"matches": ["<all_urls>"]
}
],
"host_permissions": ["http://*/", "https://*/*"]
}

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

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()]
}]);
});
});

Can I inject intercom.io using a chrome extension?

I can't seem to inject it through a normal injection.
The code is the standard script of intercom put in an src/inject/inject.js file
Here is my manifest file
{
"name": "CHANGE THIS : Extension boilerplate",
"version": "0.0.1",
"manifest_version": 2,
"description": "This extension was created with the awesome extensionizr.com",
"homepage_url": "http://extensionizr.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"permissions": [
"https://*/*",
" http://*/*"
],
"content_scripts": [
{
"matches": [
"http://*/*", "https://*/*"
],
"js": [
"src/inject/inject.js"
]
}
]
}

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

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

Categories