We Keep Coding

Chrome Extension : chrome.tabs.executeScript doesn't work

I am building a chrome extension that opens a search bar upon pressing a hotkey and when enter is pressed it shows dummy results.
I have defined the following files
background.js
chrome.commands.onCommand.addListener((command) => {
if(command === "launch") {
chrome.tabs.executeScript({
file: "insertSearchBar.js"
});
}
});
This file launches insertSearchBar.js correctly.
insertSearchBar.js
var div=document.createElement("div");
var innerDiv=document.createElement("input");
...
div.addEventListener('keypress', function(e) {
if(e.key == "Enter") {
chrome.tabs.executeScript({
file: "insertSearchResultView.js"
});
}
})
This file doesn't execute chrome.tabs.executeScript correctly and doesn't launch a new view on the current tab.
insertSearchResultView.js
var div=document.createElement("div");
document.body.appendChild(div);
var innerDiv=document.createElement("input");
div.appendChild(innerDiv);

Open chrome extension page programmatically in same tab as website

I am making an chrome-extension-based editor, and I want the user to be able to open a file within the extension when they receive a link like this: http://myeditor.com/link.html?file=xxxx
When going to that website I would like that:
if the person opening the url has the extension, open chrome-extension://blahblah/?file=xxx
else show a read-only version of the file and a link to install the extension.
Now to do that, I have in the link.html file a script that looks like this:
if (window.chrome) {
if (chrome.app.getDetails() === null) {
chrome.runtime.sendMessage(chromeId, { message: "isInstalled" }, function (reply) {
if (reply) {
chrome.runtime.sendMessage(chromeId, { gotoUrl: document.location.search });
}
});
}
}
and in the extension's background.html:
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (request) {
if (request.message) {
if (request.message == "isInstalled") {
sendResponse(true);
}
}
if (request.gotoUrl) {
var url = chrome.extension.getURL(request.gotoUrl);
chrome.tabs.create({url: url}); // how do I open this in the same tab rather than create a new tab?
}
}
return true;
});
The issue is that the code creates a new tab, is there a way I can open the extension page in the same tab as the page I called it from?

Actually chrome.tabs.update instead of chrome.tabs.create works fine...

JavaScript: windoiw.location.href

I'm making a Chrome Exntesion and I'm wondering if I can have a predefined vaule to mathc the URL window.location.href
Currently my code looks like this;
chrome.tabs.getSelected(null, function(tab) {
if(window.location.href.indexOf("google") > -1) {
alert("This website is google");
} else {
alert("This website is not google");
}
However, it display it as not being google. Now I know that -1 if removed it always come up saying the website is google however, I'm not sure how to get round that.
Thanks,

Here is how to get a list of tabs that contains "google" in their url
chrome.tabs.query({}, (tabs) => {
var googleTabs = tabs.filter(tab => tab.url.indexOf("google") > -1);
// do logic on googleTabs which is of type Tab[]. link:
// https://developer.chrome.com/extensions/tabs#type-Tab
});
if you are just looking for the current tab you can use: https://developer.chrome.com/extensions/tabs#method-getCurrent

turn on and off chrome extension

I am working on a chrome extension ,this extension have 2 icons in the browser action (On & Off) ;
basically when it is On the background execute the script.js (Inject the file:script.js)
using the chrome.tabs.executeScript(tab.id,{file:"script.js",function(){});
I had problems to turn it off !
I have tried to use messages communication between the background.js and the script.js but this does not work neither .

If I understand correctly, your extension should have two states, On and Off. Clicking the extension icon toggles it on/off.
In this case you should use storage so the extension knows what state it is in. So on a click event, use something like:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.storage.sync.get('state', function(data) {
if (data.state === 'on') {
chrome.storage.sync.set({state: 'off'});
//do something, removing the script or whatever
} else {
chrome.storage.sync.set({state: 'on'});
//inject your script
}
});
});
Note though that this is happening at the extension/browser level and will apply to all tabs, so you may need something more complex that records both the tab ID and the state.
You then have the choice to either always run a content script and check the on/off state before performing some action, or inject and remove the script. I'm not sure if you remove a script though. Depending on what the script does, you may just want to refresh the page (i.e. if your script messes with the DOM and you want to undo that when turning the extension off).

background.js
var enable=false;
chrome.browserAction.onClicked.addListener(function (tab) {
enable = enable ? false : true;
if(enable){
//turn on...
chrome.browserAction.setIcon({ path: 'icon.png' });
chrome.browserAction.setBadgeText({ text: 'ON' });
chrome.tabs.executeScript(null, { file: 'content.js' });
}else{
//turn off...
chrome.browserAction.setIcon({ path: 'disable.png'});
chrome.browserAction.setBadgeText({ text: '' });
}
});

To add onto what #david-gilbertson stated for making it active and inactive for certain tabs, I have created that functionality here. I also took added some functions for removing and adding tabs to the array. Enjoy!
function addTab(array, new_tab_id)
{
array.push(new_tab_id);
//then call the set to update with modified value
chrome.storage.sync.set({
active_tabs:array
}, function() {
console.log("added tab");
});
}
function removeTab(array, rem_tab_id)
{
const index = array.indexOf(rem_tab_id);
if (index > -1) {
array.splice(index, 1);
}
//then call the set to update with modified value
chrome.storage.sync.set({
active_tabs:array
}, function() {
console.log("removed tab");
});
}
chrome.browserAction.onClicked.addListener(function (tab) {`enter code here`
chrome.storage.sync.get({active_tabs : []}, function(data) {
if (data.active_tabs.includes(request.tab_id)) {
removeTab(data.active_tabs, request.tab_id)
console.log("Turned Off ".concat(request.tab_id))
document.removeEventListener("mousemove", highlightCurrentHover, false);
} else {
addTab(data.active_tabs, request.tab_id)
console.log("Turned On ".concat(request.tab_id))
document.addEventListener('mousemove', highlightCurrentHover, false);
}
});
);

Google Chrome Extension: Toggling a Function

I'm just starting out with javascript. My chrome extension is currently functioning but I'd like to add more functionality to it. When clicked, it runs this in background.html:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript(null, { file: "hello.js" });
});
If I wanted to have the button toggle between hello.js script and goodbye.js; how would I accomplish this?

if (localStorage["toggle"] && localStorage["toggle"]=="hello"){
alert("Good Bye");
localStorage["toggle"]="goodbye";
} else {
alert("Hello");
localStorage["toggle"]="hello";
}
Thats how Id do it in the popup of a Browser Actions html/js.
If your doing it from the background then just change the localStorage to a variable.
var toggle;
chrome.browserAction.onClicked.addListener(function (tab) {
if (toggle=="hello"){
chrome.tabs.executeScript(null, { file: "goodbye.js" });;
toggle="goodbye";
} else {
chrome.tabs.executeScript(null, { file: "hello.js" });
toggle="hello";
}
});