How to check a "sync" value in an async function? - javascript

I try to make some changes on a Chrome extension. I need the extension checks the value and if it is true, then execute a script. If false, then do nothing. I wrote something like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(localStorage["statusOfSomething"]){
chrome.tabs.executeScript(tabId, {file: "file.js" ,runAt:'document_end'});
}
});
But this takes the initial value of localStorage["statusOfSomething"] always. So there is an async function to register a listener for "onUpdated". But I need to check the localStorage["statusOfSomething"] value of "now", not the value of the time by registering the listener.
How can I do this?
Edit:
Actually I was trying to check two things:
if the website is in the site list of extension
if this website is enabled for the extension
Now here the full story;
There are some websites, I defined them on background.js file. Let's say;
a.com, b.com ... etc.
var sites = [{
name : "a",
wildcard : ["*://a.com/*"],
js : "a.js"
},{
name : "b",
wildcard : ["*://b.com/*"],
js : "b.js"
}]
and there are statuses of the sites (enable/ disable; true/false)
I think it was good to store statuses by localStorage, so I write as initial value true:
for(var i = 0; i<sites.length; i++){
localStorage[sites[i].name] =true;
}
As option; it was needed to addListener for changes:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if(request.method == "setSite"){
var name = request.site;
var status = request.active;
localStorage[name] = status;
}
return true;
});
If user checks the checkbox for status option of the website, then options.js sends message:
$('#' + name).change(function(){
var status = $(this).is(':checked');
chrome.extension.sendMessage({method: "setSite", site: this.id, active: status}, function(response) {
console.log(response.data);
});
});
Now, back to background.js , for every update of the tab, I need to check these two things together:
1. am I interested in this website?
2. is it enable for me now?
So I wrote:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status === 'complete') {
var url = tab.url;
for(var i = 0; i<sites.length; i++){
var site = sites[i];
var name = site.name;
var wildcard = site.wildcard;
if(localStorage[name] && testUrl(url,wildcard)){
chrome.tabs.executeScript(tabId, {file: site['js'] ,runAt:'document_end'});
break;
}
}
}
});
Here, I get the value of localStorage[sitename] true
If you are more interested, you can see the code on github (the version)

Related

How to get frame id of iframe for using at executeScript chrome extension mv3?

I study chrome extension MV3 not MV2
I want to get frame id(integer) by frame id tag(string), not all_frames: True to use at chrome.scripting.executeScript
Because if there are many iframes, the code can be applied where I don't intend to.
For example, I want to inject javascript code only at iframe of da_iframe_time at this site www.naver.com
I wrote the code below based on the reference, but I don't know how to find the frame id using id tag.
background.js(serviceworker)
chrome.webNavigation.onCommitted.addListener(function(tab) {
chrome.webNavigation.getAllFrames({tabId: tab.tabId}, function(res){
// I want to use the id tag here to find the frame id I want.
for(let idx=0; idx<res.length; idx++){
console.log(res[idx].frameId);
}
chrome.scripting.executeScript({
target: {tabId: tab.tabId, frameIds: [""]},
files: ['injectCode.js']
});
})
});
The roads are two.
If you know the frame URL on which you want to inject, you could scan trought frames until you'll find out your desided one.
If you don't know the url, you should inject in all frames and write a content script which sleeps in all frames but works in your desided one.
This could be achieved by checking a specific DOM node that you know is unique among all frames.
I've modified just a bit these 2 files.
As you can see I've turn the outer listener into "chrome.tabs.onUpdated"
and I've added a further condition in the block where you populate the frame array (just to avoid the main frame #0).
In handleExtension.js I've moved "sendMessage" to storage.local.set callback function 'cause you could risk send before the storage items has been set.
//in background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
if (changeInfo.status == 'complete') {
let includeStr = "cafe";
let notIncludeStr = "ArticleList";
let file_name = "";
chrome.storage.local.get(['eraseCheckBox'], async function(data) {
var res = await chrome.webNavigation.getAllFrames({'tabId': tabId});
var frames = [];
for (let idx = 0; idx < res.length; idx++) {
file_name = data.eraseCheckBox ? "eraseDealer" : "recoverDealer" + ".js";
if (res[idx].url.includes(includeStr) && !res[idx].url.includes(notIncludeStr) && res[idx].frameId != 0) {
console.log(res[idx].url);
console.log("Do and Id: " + res[idx].frameId);
frames.push(res[idx].frameId);
}
}
if (frames && file_name !== "") {
chrome.scripting.executeScript({
target: {'tabId': tabId, frameIds: frames},
files: [file_name]
});
}
});
}
});
//in handleExtension.js
document.getElementById('eraseButton').addEventListener("change", function() {
chrome.storage.local.set({
'eraseCheckBox': this.checked
}, _ => {
chrome.runtime.sendMessage({ msg: "recoverDo"})
});
})

Asynchronous Message Sending In Google Chrome Extension Popup

I have been researching asynchronous function calls and how to set variables to values from them and have had a lot of trouble with it. I want to create a port to message with my file content.js on the extension.
To do this I need to receive the tab of the window that I have open, and use its attribute id in the chrome.tabs.connect() function.
This implementation fails to reach any console.log() calls but I don't understand asynchronous programming well enough to understand. Can anyone help with this? My problem is that the two files aren't communicating, so the port isn't opening.
<script language = "Javascript">
function foo(callback){
var port = chrome.tabs.connect(chrome.tabs.query({ currentWindow: true, active: true }, function(tabs) {
//sets curTab to current tab
console.log(tabs[0]);
var curTab;
setTimeout(function(tabs) {
curTab = tabs[0];
console.log(curTab);
}, 5000);
}),{name: "mode"})
//both files are preset to this so no need to message
var mode = "on";
document.getElementById("stop").onclick = function(){
if(mode === "off")
mode = "on";
else
mode = "off";
setMode();
console.log("clikityclik");
};
console.log(mode);
function setMode(){
/*sends message to port*/
if(port)
port.postMessage({newMode: mode});
else{
console.log("error: port not created");
}
}
}
the relevant code from my content.js file is below. I call this function once
function getMode(){
/*receives message from port
**communicates with sandboxed.html
*/
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "mode");
port.onMessage.addListener(function(msg) {
if (msg.newMode){
mode = msg.newMode;
console.log("Mesage received: "+mode);
}
else
console.log("error receiving new mode, last mode was: " + mode);
});
});
}
The goal of this program is for the first script to send messages to the content.js when a div is clicked and for the 'content.js' file to receive those messages whenever they are sent.
the solution was to make a function that creates the port, with an input of tab. Basically, getTab will try to get the the value of the tab, and if we do have a tab it will run the callback function which is createPort which contains the information necessary to create the port and also the event handler for the click on the div.
function getTab(callback){
chrome.tabs.query({ currentWindow: true, active: true }, function(tabs) {
console.log(tabs[0]);
callback(tabs[0]);
});
}
function createPort(tab){
var port = chrome.tabs.connect(tab.id,{name: "mode"});
document.getElementById("stop").onclick = function(){
if(mode === "off")
mode = "on";
else
mode = "off";
setMode(port);
console.log("clikityclik");
};
}
var mode = "on"; //mode is preset to on in content.js
getTab(createPort);

how to get background.js to change based on options.js

I am currently making a Google Chrome extension, and in the options I want the user to be able to choose between it being always on or only activating when clicked. To do this, I need an options.js and a background.js file, which I have. However, I am having a lot of trouble getting them to communicate properly. I tried using the chrome.storage api, but it won't do anything.
Here is my code for background.js:
chrome.browserAction.onClicked.addListener(function() {
// Send a message to the active tab
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response));
});
});
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
// console.log(tabs.length);
chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response) {});
});
}
});
And here is my code for options.js:
// Saves options to chrome.storage
function save_options() {
var behavior = document.getElementById('behavior').value;
chrome.storage.sync.set({
extensionBehavior: behavior
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved!';
setTimeout(function() {
status.textContent = '';
}, 1000);
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
// Use default value color = 'red' and likesColor = true.
chrome.storage.sync.get({
extensionBehavior: 'onClick'
}, function(items) {
document.getElementById('behavior').value = items.extensionBehavior;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);
If the behavior is set to "onClick", I only want the chrome.browserAction.onClicked.addListener portion to be executed. If the behavior is set to 'alwaysOn', then I only want the chrome.tabs.onUpdated.addListener portion to be executed. As far as debugging goes, both of those chunks work the way they're supposed to. I just need to know how to get one or the other to run based on the current options.
For the communication between option and background, it would be quite easy when you choose the localStorage to pass info between them. http://www.w3schools.com/html/html5_webstorage.asp

Cannot send message to content script properly

I'm so close to finishing my Chrome extension. I have one or two things to do. One of them is sending a message from the content script to the background script. I wrote the following, but it doesn't quite what I want.
content.js
var a=document.getElementsByTagName('a');
for (i=0,len=a.length;i<len;i++) {
a[i].addEventListener('contextmenu', function() {
var linkTitle = this.getAttribute('title').trim();
var linkUrl = this.getAttribute('href');
if ((linkTitle != null) && (linkTitle.length > 0)) {
chrome.extension.sendMessage({action:'bookmarkLink', 'title':linkTitle, 'url': linkUrl}, function(msg) {
alert('Messages sent: '+action+' and '+linkTitle+' also '+linkUrl);
});
}
});
};
background.js
chrome.contextMenus.create({'title': 'Add to mySU bookmarks', 'contexts': ['link'], 'onclick': mySUBookmarkLink});
function mySUBookmarkLink(info, tab) {
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.action == 'bookmarkLink') {
chrome.storage.sync.set({'title': msg.linkTitle, 'url': msg.linkUrl}, function(msg) {
alert('Saved '+msg.linkTitle+' to bookmarks');
});
}
});
};
My problems are:
In the first code block, it alerts Saved undefined to bookmarks as soon as I right click on the link, while as I understand it should only send a message on right click and the second code block should alert Saved to bookmarks when I click on the context menu. What am I missing or doing wrong?
I may not have used parameters correctly (I am fairly new to extension development and Javascript in general). Do the above look okay?
Thank you in advance,
K.
It's chrome.runtime.sendMessage and chrome.runtime.onMessage rather than chrome.extension.
There used to be chrome.extension.sendRequest and chrome.extension.onRequest which have been deprecated in favor of the chrome.runtime API methods mentioned above.
See Chrome Extensions - Message Passing
it's JSON-serializable messaging, where first pair is for recognition, and then followed by pairs of
key: value.
You pull the value from received message by calling it's key.
is should be:
alert('Saved '+msg.title+' to bookmarks');
or even better:
function mySUBookmarkLink(info, tab) {
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.action == 'bookmarkLink') {
var receivedValue = msg.title; //pull it out first, for better overview
chrome.storage.sync.set({'title': msg.title, 'url': msg.url}, function(msg) {
alert('Saved '+receivedValue+' to bookmarks');
});
}
});
};

Disable / Enable Chrome Extension Via Browser Action / Icon

The chrome extension I am developing inserts content scripts and css onto every page of a website. However, the user may have a certain page or pages he or she does not want the extension to run on, so it would be great if I could set up the browser action as basically a toggle on / off.
What I'd like to do is something like this:
chrome.browserAction.onClicked.addListener(function(tab) {
//IF ENABLED THEN DISABLE
//IF DISABLED THEN ENABLE
}
Any help would be greatly appreciated!
Such API is not provided. But two possible workarounds exist:
I. You can use the "disabled" flag variable and update it from your background page.
Background page:
function disableExtension(disabled)
{
chrome.windows.getAll({populate : true}, function (window_list)
{
for (var i = 0; i < window_list.length; ++i)
{
var window = window_list[i];
for (var j = 0; j < window.tabs.length; ++j)
{
var tab = window.tabs[j];
if (checkContentScriptExists(tab))
{
chrome.tabs.executeScript(tab.id, {code : "disabled = " + disabled + ";"}, allTabs: true)
}
}
}
// No matching url found. Open it in the new tab
chrome.tabs.create({ url : url, selected: true });
});
}
And content script should check the condition before the run
if (!disabled) doSomething();
II. A controversial approach to save disable variable within background page content
Background page:
function disableExtension(disabled)
{
global.disabled = disabled;
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.msg == "getDisabled") {
sendResponse({disabled: global.disabled});
return true;
}
});
and the content script should query currently disabled status before execution
chrome.runtime.sendMessage({msg: "getDisabled"}, function(response) {
if (!response.disabled) doSomething();
});
Chrome extensions have APIs of their own. You can invoke them via content scripts. Not sure if you can invoke them via any third party JS. Refer this ink
Hope it helps.

Categories

Resources