I have a button element on the popup.html file that I want to modify on page load via the content.js file. However, when I tried the below code it did not work (text button text does not change).
How do I change the button text when the content loaded?
popup.html:
<html>
<body>
<button id="to-modify-button">no text</button>
<script src="popup.js"></script>
</body>
</html>
popup.js:
const btn = document.getElementById("to-modify-button");
chrome.runtime.onMessage.addListener(function (
request,
sender,
sendResponse
) {
if (request.theme === "dark") {
btn.textContent = "Disable dark mode";
} else {
btn.textContent = "Enable dark mode";
}
});
content.js:
(() => {
chrome.runtime.sendMessage({ theme: "dark" });
})();
You can't push to popup. pull from popup.
manifest.json
{
"name": "content_scripts + popup",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [
{
"js": [
"content.js"
],
"matches": [
"<all_urls>"
]
}
],
"action": {
"default_popup": "popup.html"
}
}
popup.html
<html>
<body>
<button id="to-modify-button">no text</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
const btn = document.getElementById("to-modify-button");
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, "message", (response) => {
console.log(response);
if (response.theme === "dark") {
btn.textContent = "Disable dark mode";
} else {
btn.textContent = "Enable dark mode";
}
});
});
content.js
console.log("content.js");
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
console.log(message);
sendResponse({ theme: "dark" });
return true;
});
Related
I have created a Chrome extension that queries for elements on some webpages that feature dynamic content loading via AJAX; -- when on some of these webpages, my content.js script triggers too early (prior to the loading of the elements I need).
As a result, I set up a listener in my background script to listen for when the page has loaded enough of the elements and then it re-injects the content.js script.
background.js:
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.type == "hats_men") {
chrome.windows.get(sender.tab.windowId, function () {
/*get user's size based on product type (ie. hat)*/
var res = findSize();
if (res == -1) {
/*do nothing since no size exists for them*/
}
else {
/*send size back to content script via messaging*/
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { type: "res_size", size: res });
});
}
});
}
});
var oldTab;
chrome.tabs.onUpdated.addListener(
function (tabId, changeInfo, tab) {
var temp = tab.url;
/*IF: on a product page, execute script.*/
if (temp && (temp.indexOf("shop.com/shop/") > -1)) && (changeInfo.url === undefined) && (temp != oldTab)) {
chrome.tabs.executeScript(tabId, { file: "content.js" });
oldTab = tab.url;
}
});
Unfortunately, I am unable to call any functions from content.js that exist in my other js files. Is there a way to invoke them? For context, I've included the js files in question into "web_accessible_resources" and "content_scripts" in my manifest.json.
external.js:
function monk(x) {
if (x != 0) {
console.log(x);
}
}
content.js:
/*get current url*/
var cur_url = window.location.href;
/*check if user is on supported site*/
if (cur_url.indexOf("hello.com/shop/") > -1 && cur_url.indexOf("quantity=1") > -1) {
/*get relevant user data*/
chrome.storage.sync.get({ data: [] }, async function (user) {
/*call prod_res() to get item details from dynamically loaded product page*/
const res = await prod_res();
/*if the product is for men*/
if (res[1] == "man") {
/*if the product is a hat*/
if (res[0] == "hat") {
/*send message to background script that this is a mens' hat*/
chrome.runtime.sendMessage({ type: "hats_men" },
function (response) {
/*listen for user's hat size in the request/message from background script*/
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
/*log user's hat size to console*/
if(request.type == "res_size"){
monk(request.size][1]);
}
}
});
}
);
}
}
});
}
/nothing logs to console/
manifest.json:
{
"manifest_version": 2,
"name": "E-Co",
"version": "0.2",
"background": {
"scripts": [ "jquery-3.5.1.min.js", "reduce.js", "background.js" ],
"persistent": false
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"jquery-3.5.1.min.js",
"content.js",
"external.js"
]
}
],
"web_accessible_resources": [
"external.js"
],
"browser_action": {
"default_icon": "logo_active.png",
"default_popup": "popup.html",
"default_title": "E-co Pop-Up"
},
"icons": {
"16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png"
},
"permissions": [
"storage",
"notifications",
"tabs",
"*://*/*"
],
"content_security_policy": "script-src 'self' https://ajax.aspnetcdn.com; object-src 'self'"
}
Your content.js sends a message and uses a callback to wait for a response, which must be sent back by using sendResponse. Your background script doesn't send a response, it only sends a new message, so the first callback never runs.
Use the simple messaging example from the documentation:
content.js
chrome.runtime.sendMessage({type: 'hats_men'}, monk);
background.js:
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.type == 'hats_men') {
sendResponse(findSize());
}
});
Note that sendResponse must be called for each message that was sent with a callback like we did above, otherwise you'll see errors in the console (unless you suppress them).
I am trying to create a basic Google Chrome Extension that simply copies the source HTML code on the page I am on. I have never created a Chrome extension and I am really stuck and would appreciate some help. I started the extension using the Chrome guide and from what I have read on the internet is I content scripts to access the webpage. I don't know how to call the content scripts however. I tried using import statements but I received errors - I think I am really misunderstanding how the whole thing works. I am trying to also get the console log to display in the webpage console, instead of the chrome extension console.
popup.html
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
manifest.json
"name": "Company Websites",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"page_action": {
"default_popup": "popup.html"
},
"permissions": ["storage","declarativeContent"],
"manifest_version": 2
}
content.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("changeColor").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
console.log("hello?");
//somehow copy source code
}
background.js
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: '* insert target web address*'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
Any help would be appreciated!
Make another file called load.js and do an XML HttpRequest, then include it in the popup.html.
popup.html
<script src="load.js"></script>
load.js
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = xhttp.responseText;
}}
xhttp.open("GET", "website url", true);
xhttp.send();
}
loadDoc()
From there you can store and retrieve it in local storage, console.log(data), or use it in document.getElementById('ID').innerHTML = data
I create a extension. When user click on extension icon it will send message to the content script and then content script again call a function. In side that function it will send message to the background script. I face some strange behavior chrome.runtime.onMessage.addListener() in background script execute multiple times.
manifest.json
{
"manifest_version": 2,
"name": "Reportar",
"version": "1.0",
"description": "Loreipsum.",
"background": {
"scripts": ["bootstrap.js"],
"persistent": false
},
"browser_action": {
"default_icon": "img/icon48.png",
"default_title": "Gitlab Issue"
},
"web_accessible_resources": [
"templates/*.html"
],
"content_scripts": [{
"all_frames": false,
"css": ["content_style.css"],
"js": ["content_script.js"],
"matches": ["http://*/*", "*/*"]
}],
"icons": {
"16": "img/icon20.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"permissions": [
"tabs",
"activeTab",
"<all_urls>",
"storage"
]
}
background.js
function clickOnIssue() {
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
console.log('Going to send message to content script that user click on browserAction icon');
chrome.tabs.sendMessage(tabs[0].id, {id: 111});
});
}
chrome.tabs.onUpdated.addListener(function (id, info, tab) {
if (info.status === 'complete') {
chrome.browserAction.onClicked.removeListener(clickOnIssue);
chrome.browserAction.onClicked.addListener(clickOnIssue);
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
var _t = new Date().getTime();
console.log("Request received for getProjectList(" + _t + ")");
sendResponse({t: _t});
return true;
});
}
});
content_script.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log(request);
//sendResponse({msg: 'received'});
chrome.runtime.sendMessage({action: 'submitSettings'}, function (resp) {
console.log('Received the message that user click on browserAction icon');
updateProjectDropDown();
});
return true;
});
function updateProjectDropDown() {
console.log('Request dispatch for getProjectList');
chrome.runtime.sendMessage({action: 'getProjectList'}, function (resp) {
console.log(resp.t + ': bootstrap.js JS received the message');
});
}
This is browser's console
This is backgound js console
Edit: Add manifest file
I think bellow code will solve your issue
chrome.runtime.onInstalled is run once so your listeners will not bind multiple times.
chrome.runtime.onInstalled.addListener(function (details) {
chrome.browserAction.onClicked.addListener(clickOnIssue);
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
//TODO: your code
});
});
I'm building an google extension that inserts html in page and shows a menu on browser action icon click and I don't find way to keep my extension open when I reload the page. So on every reload, we have to active it again from Browser Action icon.
Below the manifest file
{
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "img/icone.png",
"default_title": "show menu"
},
"icons" : {
"128" : "img/icone_128.png",
"48" : "img/icone_48.png",
"32" : "img/icone_32.png",
"24" : "img/icone_24.png",
"16" : "img/icone_16.png"
},
"manifest_version": 2,
"name": "p|layer",
"version": "1.0.4",
"content_scripts": [
{
"matches": [ "<all_urls>"],
"css":["css/grid.css", "css/font-awesome.min.css"],
"js":["js/jquery-1.11.1.min.js","js/jquery-ui.js", "js/jquery.nicefileinput.min.js"]
}
],
"web_accessible_resources": [
"fonts/fontawesome-webfont.woff"
],
"permissions": [ "activeTab"]
}
script (background.js) injecting contentscript
chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON
chrome.tabs.executeScript(tab.id,
{"file": "js/contentscript.js"},
function () { // Execute your code
console.log("Script Executed .. "); // Notification on Completion
});
chrome.tabs.insertCSS(tab.id, {file: "css/grid.css"});
chrome.tabs.insertCSS(tab.id, {file: "css/font-awesome.min.css"});
chrome.tabs.insertCSS(tab.id, {file: "css/slider.css"});
});
any help will be appreciated
So, from the comments the problem was inferred: your button click activates your content script, but a page reload clears it. Assuming you want the button click to act as a toggle:
1) Always inject the content script / CSS, but don't show the UI immediately:
"content_scripts": [
{
"matches": [ "<all_urls>"],
"css": ["css/grid.css", "css/font-awesome.min.css", "css/slider.css"],
"js": [
"js/jquery-1.11.1.min.js", "js/jquery-ui.js",
"js/jquery.nicefileinput.min.js", "js/contentscript.js"
]
}
],
2) Keep track of "activated" tabs:
var activeTabs = {};
chrome.browserAction.onClicked.addListener( function(tab){
var active;
if(activeTabs[tab.id]){
delete activeTabs[tab.id];
active = false;
} else {
activeTabs[tab.id] = true;
active = true;
}
/* (part 3) */
});
chrome.tabs.onRemoved.addListener( function(tabId){
delete activeTabs[tabId];
});
chrome.tabs.onReplaced.addListener( function(newTabId, oldTabId){
if(activeTabs[oldTabId]) activeTabs[newTabId] = true;
delete activeTabs[oldTabId];
});
3) Use messaging to show/hide UI:
Content script:
chrome.runtime.onMessage.addListener( function(message. sender, sendResponse){
if(message.showUI) showUI();
if(message.hideUI) hideUI();
});
Background script:
chrome.browserAction.onClicked.addListener( function (tab) {
var active;
/* (part 2) */
if(active) {
chrome.tabs.sendMessage(tab.id, {showUI: true});
} else {
chrome.tabs.sendMessage(tab.id, {hideUI: true});
}
});
Additional robustness can be added for the cases of extension reload, but that's the gist of it.
I am writing extension which will underline accent in English words on web pages.
I've got stuck after I click "Search" button on popup, nothing seems to happen.
Here's the scenario:
user double click a word on a web page.
the whole word is marked.
user clicks extension icon on chrome browser bar.
a popup is shown. Input field in popup is filled in with the marked word.
user adds accent. Ie. if marked word is 'boundary', in popup's input field there will be: 'boudary' displayed. Then user modify the input value to: 'boudary,bo' (without quotes).
user click "Search" button on popup.
letters "bo" in "boundary" word on page are being underlined.
manifest.json
{
"content_scripts": [ {
"js": [ "jquery.js", "jquery.highlight-4.js", "selection.js" ],
"matches": [ "\u003Call_urls\u003E" ]
} ],
"name": "Mark accent",
"version": "1.0",
"manifest_version": 2,
"options_page": "options.html",
"description": "Marks accent in english words for selected word on page",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"icons": {
"128": "icon.png"
},
"permissions": [ "tabs", "http://*/*", "https://*/*", "storage", "file:///*" ]
}
app.js
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
$("#t1").val(response.data);
console.log('input t1 value: ' + $("#t1").val(response.data));
});
});
$("#t1").keypress(function(event) {
if ( event.which == 13 ) {
$("#search_btn").click();
}
});
$("#t1").focus();
function search(that) {
var token = new String (t1.value);
chrome.tabs.executeScript(null,
{code:"$(document.body).highlight('"+token+"','text-decoration:underline')"});
window.close();
}
selection.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});
popup.html
<style>
body {
overflow: hidden; margin: 5px; padding: 0px; background: black;color: white;
width: 300px; font-family: 'Droid Sans', arial, sans-serif;
}
</style>
Please enter the word to highlight :
<input type="text" id="t1"/>
<button onclick="search(this)" id="search_btn">Search</button>
<button onclick="hl_clear(this)" id="clear_btn">Clear all highlights</button>
<script src="jquery.js"></script>
<script src="jquery.highlight-4.js"></script>
<script src="app.js"></script>
jquery.highlight-4.js
jQuery.fn.highlight = function(pat, fbgcolor) {
function innerHighlight(node, pat, fbgcolor) {
var skip = 0;
var array = pat.split(',');
var sWord = array[0];
var accent = array[1];
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(sWord);
if (pos >= 0) {
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(sWord.length);
var pos2 = middlebit.data.toUpperCase().indexOf(accent);
if (pos2 >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
fbgcolor += ";padding: 0px; margin: 0px;";
spannode.setAttribute('style', fbgcolor);
var middlebit2 = middlebit.splitText(pos2);
var endbit2 = middlebit2.splitText(accent.length);
var middleclone2 = middlebit2.cloneNode(true);
spannode.appendChild(middleclone2);
middlebit2.parentNode.replaceChild(spannode, middlebit2);
}
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes &&
!/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat, fbgcolor);
}
}
return skip;
}
return this.each(function() {
innerHighlight(this, pat.toUpperCase(), fbgcolor);
});
};
It is working after so many modifications and eliminated non-chrome extension related content. You can add your content to this skeleton.
Do not add Inline scripts in html
<button onclick="search(this)" id="search_btn">Search</button>
Basic Skeleton of your code:
manifest.json
{
"content_scripts": [ {
"js": [ "jquery.js", "jquery.highlight-4.js", "selection.js" ],
"matches": [ "<all_urls>" ]
} ],
"name": "Mark accent",
"version": "1.0",
"manifest_version": 2,
"description": "Marks accent in english words for selected word on page",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"icons": {
"128": "icon.png"
},
"permissions": [ "tabs", "<all_urls>" ]
}
app.js
function search(that) {
console.log("Search is clicked");
var token = document.getElementById("t1").value;
console.log(token);
chrome.tabs.executeScript(null,
{code:"highlight();"});
//window.close();
}
window.onload=function (){
document.getElementById("search_btn").onclick=search;
};
selection.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});
popup.html
<html>
<head>
<style>
body {
overflow: hidden; margin: 5px; padding: 0px; background: black;color: white;
width: 300px; font-family: 'Droid Sans', arial, sans-serif;
}
</style>
<script src="jquery.js"></script>
<script src="app.js"></script>
<body>
Please enter the word to highlight :
<input type="text" id="t1"/>
<button id="search_btn">Search</button>
<button id="">Clear all highlights</button>
</body>
</html>
jquery.highlight-4.js
function highlight(){
console.log("Highlight is called");
}
Let me know if it is still failing.