Chrome extension Script Injection to each open tab - javascript

I tried to build simple extension according to the examples:
from here and here
and I must be doing something wrong here.
All I want is for start that on each loading page ( or even better before loading ) it will popup
hello alert
manifest.json
{
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["jquery-1.8.2.min.js","contentscript.js"],
"run_at": "document_end"
}
],
"web_accessible_resources": [
"script_inpage.js"
],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Test 123"
},
"content_security_policy": "script-src 'self'; media-src *; object-src 'self'",
"description": "Simple Test 123.",
"manifest_version": 2,
"minimum_chrome_version": "18",
"name": "Test 123",
"permissions": [
"unlimitedStorage",
"http://*/",
"tabs",
],
"version": "2.6"
}
background.html is empty for now
contentscript.js:
var s = document.createElement('script');
s.src = chrome.extension.getURL('script_inpage.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
s.parentNode.removeChild(s);
};
script_inpage.js:
alert("this is script");
There is no error even when I trigger the developer console window.

Your manifest file is invalid, there's a superfluous comma after the last entry in the "permissions" section:
"permissions": [
"unlimitedStorage",
"http://*/",
"tabs", // <-- Remove that comma
],
If you want your script to run as early as possible, use "run_at": "document_start" instead of "document_end". Then, your script will run before <head> and <body> even exist.

Related

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

Modified page redder example for content script

I did simple example page redder as given in chrome api page example. There, they used background script to change the background color via executeScript. I don't want to do that, I want to use content script only (easier access to DOM). Here is my code:
1) manifest.json
{
"manifest_version": 2,
"name": "Modified page redder example",
"version": "1.0",
"icons": { "16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png" },
"permissions": [
"activeTab"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"content_scripts" : [
{
"matches" : [ "<all_urls>" ],
"js" : [ "contentscript.js" ]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Load apps"
}
}
2) myscript.js
document.getElementById('btchange').onclick=function(){
chrome.runtime.sendMessage('red');
}
3) popup.html
<html>
<body>
<input type='button' value='change' id='btchange'>
<script src='myscript.js'></script>
</body>
</html>
4) contentscript.js
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse){
//chrome.tabs.executeScript({code: 'document.body.style.backgroundColor = "'+request+'"'});
alert(request);
}
);
I don't receive the result as I want. No error. No promt (by alert red).

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

How to add user-script like tamparmonky on chrome extention

Hello i am trying to create a chrome extension. It like tampermonky. It add some user script. But the problem is some variable show undefined, But when i use the same script on tampermonky there is no error.
My extension manifest.json is
{
"name": "SayHello",
"description": "It will say hello when a page finishied load.",
"version": "0.4",
"permissions": [
"tabs",
"<all_urls>",
"storage"
],
"browser_action": {
"default_icon": "icon.png"
},
"options_page": "options.html",
"content_scripts": [
{
"exclude_globs":[],
"include_globs":["*"],
"matches": [
"http://www.amazon.com/*",
"https://www.amazon.com/*"
],
"js": ["email.js"],
"run_at": "document_end"
}
],
"converted_from_user_script": true,
"manifest_version":2
}
and email.js is.
P.when("jQuery","ready").execute(function(t){
var i="http://www.amazon.com/gp/profile/A3U7NCDBQ95EJM/customer_email";
t.get(i,function(t){
var o=t.data.email;
console.log('o:'+o);
});
return t;
});
error massage is Uncaught ReferenceError: P is not defined

Content script answer twice on popup message - Chrome Extensions

I got result but it returns two alerts "Content: This is a test" but in scripts I send only 1 post.
It works perfect but two answers is too annoying. Help pls.
Manifest:
{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"description": "Test",
"background": {
"scripts": ["event.js"],
"persistent": true
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"permissions": [ "tabs", "http://*/*", "https://*/*" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": true
}
],
"browser_action": {
"name": "Do Action",
"default_icon": "icon.png",
"default_popup": "popup.html"
}}
Popup script.js:
$("#myButton").click(function(){
chrome.tabs.getSelected(null, function(tab)
{
chrome.tabs.executeScript(tab.id, { file: "content.js" }, function()
{
var port = chrome.tabs.connect(tab.id, { name: "port-conn" });
port.postMessage({ data: "This is a test" });
port.onMessage.addListener(function (msg)
{
alert("Content: " + msg.answer);
});
});
});
}...
content.js:
chrome.extension.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
port.postMessage({answer: msg.data});
});
});
Content.js is specified first in manifest so it is now loading when your extension is loaded. Then you are using it via executeScript so it runs the second time.
do these changes.
Popup script.js:
chrome.tabs.getSelected(null, function(tab){
var port = chrome.tabs.connect(tab.id, { name: "port-conn" });
port.onMessage.addListener(function (msg)
{
alert("Content: " + msg.answer);
});
$("#myButton").click(function(){
port.postMessage({ data: "This is a test" });
});
});
That is the point of messaging. if it did not work then you HAVE TO USE BACKGROUND SCRIPT AS WELL that just forwards message between content and popup
Problem solved.
In manifest
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": true
}
],
it runs content.js on every page and
{ file: "content.js" }
Run it again in active tab. So thats why one tab run content twice.

Categories