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.
Related
Here is my manifest.json file:
{
"manifest_version": 2,
"permissions": ["tabs", "storage", "webRequest", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["assets/js/jquery-3.3.1.min.js", "blocker.js"]
}
],
"background": {
"scripts": ["background.js"]
},
"options_ui": {
"page": "background-page.html",
"browser_style": true
}
}
and my blocker.js file:
function cleanPage(tabId, changeInfo, tabInfo) {
console.log("I am in cleanPage");
}
try {
console.log("browser : ");
console.log(browser);
console.log("browser.tabs : " + browser.tabs);
browser.tabs.onUpdated.addListener(cleanPage);
} catch(err) {
console.log("err : ", err);
}
And I get this error:
browser.tabs : undefined blocker.js:114:3
err : TypeError: "browser.tabs is undefined"
My setup:
- Mozilla Firefox 65.0.1
- Ubuntu 18.04
I don't really understand this error, since I'm doing exactly what is written in the Mozilla Tutorial. Does anyone know why this error does appear?
My blocker.js file was in the content_scripts. I moved it to the background_scripts and it worked.
Only the files from the background_scripts can access the browser.tabs API.
My new manifest.json file:
{
"manifest_version": 2,
"permissions": ["tabs", "storage", "webRequest", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": []
}
],
"background": {
"scripts": ["assets/js/jquery-3.3.1.min.js", "background.js", "blocker.js"]
},
"options_ui": {
"page": "background-page.html",
"browser_style": true
}
}
I'm working on an extension and I want the icon to change when the active tab or url changes. Here's what i have so far:
manifest.json
{
"manifest_version": 2,
"name": "Link2QR",
"description": "chrome_extension",
"version": "1.0",
"browser_action": {
"default_icon":"icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"tabs"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
content.js
if(onSupportedPageNeedChangeIcon) {
chrome.runtime.sendMessage({ "newIconPath" : "testimage.png" });
}
popup.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
chrome.browserAction.setIcon({
path: request.newIconPath,
tabId: sender.tab.id
});
});
You are handling the message in popup.js, which I suppose is running in the browser_action popup page.
popup.js thus only runs when the extension button is clicked.
You should instead handle it in background.js:
manifest.json
{
"manifest_version": 2,
"name": "test",
"version": "0.0.1",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"24": "icon.png",
"25": "icon.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
chrome.browserAction.setIcon({
path: request.newIconPath,
tabId: sender.tab.id
});
});
I am trying to add an event listener to my content script for a Chrome extension I am working on.
My content script:
console.log("test 1");
document.addEventListener('DOMContentLoaded', function () {
console.log("test 2");
});
I know the content script is working because the first message is printed. However, the event listener is never fired for me.
What am I missing? I feel as if it is something silly.
My manifest.json
{
"manifest_version": 2,
"name": "test",
"description": "testtesttesttest",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Settings"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"content_scripts": [{
"matches": ["http://*/*","https://*/*"],
"js": ["colorLink.js"],
"run_at": "document_end",
"all_frames": true
}]
}
The content script is injected at "run_at": "document_end" which occurs after DOMContentLoaded. In this case you don't need an event listener.
this is not firing at all when the page finishes loading. Basically when I click the browser action button, it will trigger it on, and on page load, it will run a script. In my background.js
var toggle = false;
chrome.browserAction.onClicked.addListener(function(tab) {
toggle = !toggle;
if(toggle){
chrome.browserAction.setIcon({path: "icons/logo.png", tabId:tab.id});
// chrome.tabs.executeScript(tab.id, {file:"SCRIPT.user.js"});
chrome.tabs.executeScript(tab.id, {code:"alert('aaxxxbbaa')"});
}
else{
chrome.browserAction.setIcon({path: "icons/icon48.png", tabId:tab.id});
chrome.tabs.executeScript(tab.id, {code:"alert('bbdxdb')"});
}
});
var filter = {'url': [
{hostSuffix: '*', pathPrefix: ''},
{hostSuffix: '*', pathPrefix: ''}
]};
chrome.webNavigation.onDOMContentLoaded.addListener(function(tab){
if (toggle)
chrome.tabs.executeScript(tab.id,{code:"alert('loaded')"});
},filter);
I've also tried to set it in the manifest
{
"name": "Tool",
"version": "0.0.1",
"manifest_version": 2,
"description": "Te",
"homepage_url": "",
"icons": {
"16": "icons/logo.png",
"48": "icons/logo.png",
"128": "icons/logo.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"browser_action": {
"default_icon": "icons/logo.png",
"default_title": "browser action demo"
},
"permissions": [
"<all_urls>"
],
"content_scripts": [
{
"run_at": "document_end",
"matches": [
"https://www.google.ca/*"
],
"css": [
"src/inject/inject.css"
]
},
{
"run_at": "document_end",
"matches": [
"https://www.google.ca/*"
],
"js": [
"src/inject/inject.js"
]
}
]
}
and in my inject.js
chrome.extension.sendMessage({}, function(response) {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
// ----------------------------------------------------------
// This part of the script triggers when page is done loading
console.log("Hello. This message was sent from scripts/inject.js");
// ----------------------------------------------------------
}
}, 10);
});
window.addEventListener ("load", myMain, false);
function myMain (evt) {
console.log('aaann');
var jsInitChecktimer = setInterval (checkForJS_Finish, 111);
function checkForJS_Finish () {
if ( typeof SOME_GLOBAL_VAR != "undefined"
|| document.querySelector ("SOME_INDICATOR_NODE_css_SELECTOR")
) {
clearInterval (jsInitChecktimer);
// DO YOUR STUFF HERE.
console.log('hi');
}
}
}
In your manifest file, you have duplicate content scripts, one with CSS and one with JS. It should look like this:
"content_scripts": [
{
"run_at": "document_end",
"matches": [
"https://www.google.ca/*"
],
"js": [
"src/inject/inject.js"
],
"css": [
"src/inject/inject.css"
]
}
]
Also, if you want it to match other urls, you will need to add them specifically, or use
"matches": ["<all_urls>"]
As for your proposed background script, that is essentially re-inventing the concept of content scripts, and it may not be in your best interest. I suggest sticking with the content script route.
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.