To improve my workflow I'm trying to create a small Chrome extension that will run a JS script on a website that contains a specific string in the URL. I've never worked with JS and I'm a rather inexperienced hobbyist, so this code may make little to no sense.
The onInstalled event is executed without an issue, but I can't get onUpdated to trigger properly.
Here are all of the files:
hide.js
chrome.runtime.onInstalled.addListener(() => {
console.log('Extension initialized');
});
chrome.tabs.onUpdated.addListener(() => {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var activeTab = tabs[0];
var tabUrl = activeTab.url;
});
if(tabUrl.includes('website')){
chrome.scripting.executeScript({target: {tabId: activeTab.id}, function: code()});
}
});
function code(){
console.log('code executed')
}
manifest.json
{
"manifest_version": 3,
"name": "Hide",
"version": "0.1",
"background": {
"service_worker": "hide.js"
},
"permissions": ["storage", "tabs", "scripting"]
}
Related
In short, I want that when you press my extension button from the context menu, the content script will be added to the web page temporarily. I tried to use sendMessage() but it just didn't work.
Any help will be appreciated:)
//This is the service worker (eventPage)
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'select',
title: 'select',
type: 'normal',
contexts: ['all']
});
})
chrome.contextMenus.onClicked.addListener(function(clickDate) {
if (clickDate.menuItemId == 'select') {
//send message to make content-script start operate
chrome.runtime.sendMessage('start');
}
});
//let's say that this is the content-script
chrome.runtime.onMessage.addListener(function(response, sender, sendResponse) {
if (response == 'start') {
// js code that is inserted into the site
}
});
{
"manifest_version": 3,
"name": "SendFast",
"description": "This extension makes it easier to send information",
"version": "1.0",
"icons": {
"128": "16-nahum.png",
"48": "64-nahum.png",
"16": "16-nahum.png"
},
"action": {
"default_icon": "16-nahum.png",
"default_popup": "popup.html"
},
"permissions":["contextMenus","activeTab"],
"background":{
"service_worker": "eventPage.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"]
}
]
}
so I tried to use chrome.scripting but failed. that's what I came up with:
//eventPage.js(after changes)
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'select',
title: 'select',
type: 'normal',
contexts: ['all']
});
})
async function addJsScript() {
const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
await chrome.scripting.executeScript({
target: {tabId: tab.id},
script:["content-script"],
});
}
chrome.contextMenus.onClicked.addListener(function(clickDate) {
if (clickDate.menuItemId == 'select') {
addJsScript()
}
});
and i added this to the manifest:
"permissions":["contextMenus","activeTab","scripting"],
"host_permissions":["<all_urls>"],
There are a few problems that I have been having that is related to this. Here's what you need to know.
First, to access the tabs, you need to add "host_permissions": ["<all_urls>"] to your manifest (v3) to assure that you can access the web pages.
Second, instead of script:["content-script.js"] as seen in the addJsScript() function, use files:["content-script.js"].
Lastly, make sure you have the scripting permission added in your manifest file.
That is what I had to do to fix it for me.
Also, as stated above, remove the content script from your manifest and add .js to the end of the script name in files
I'm writing Windows Forms application on C# and trying to get current URL from Chrome in this application. I find active process, and if it's name is "chrome" I try anything, but unsuccessfully. All solutions i've found works only for previous versions of Chrome. As far as I understand, it's better to use Google Chrome Extention for this (but I have never write any of them and I'm superficially familiar with JS).
So, I tried to write an Extension:
manifest.js:
{
"manifest_version": 3,
"name": "URL collector",
"version": "0.11",
"description": "Собирает URL посещенных ресурсов",
"permissions": [
"tabs",
"activeTab",
"webNavigation",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"app.js"
]
}
]}
background.js:
chrome.runtime.onInstalled.addListener(() => {
async function getCurrentTab() {
let queryOptions = { active: true, lastFocusedWindow: true };
let [tab] = await chrome.tabs.query(queryOptions);
return tab;
}
alert(window.getCurrentTab());});
app.js:
chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabs) {
var tab = tabs[0];
console.log(tab.url);
alert(tab.url);});
Also I've tried such code:
;(function() {
var pushState = history.pushState;
var replaceState = history.replaceState;
history.pushState = function() {
pushState.apply(history, arguments);
window.dispatchEvent(new Event('pushstate'));
window.dispatchEvent(new Event('locationchange'));
};
history.replaceState = function() {
replaceState.apply(history, arguments);
window.dispatchEvent(new Event('replacestate'));
window.dispatchEvent(new Event('locationchange'));
};
window.addEventListener('popstate', function() {
window.dispatchEvent(new Event('locationchange'))
});})();
window.addEventListener('locationchange', function(){
console.log('onlocationchange event occurred!');
alert(chrome.tabs.getCurrent(tab => tab.url));})
Everything I have tried in app.js I also tried in background.js and vice versa. And either I did not understand how to track the Extension triggering, or it does not work (probably the second). In general, I tried to catch URL change events, for example, switching tabs or following a link. Well, so far nothing has come of it. Actually, the first question is this: how to make such Extension?
It seems, I totally do not understand the topic, therefore I will also be extremely grateful for links to materials on it.
Well, and the second question is, what is the best way to pass a URL to a Windows Forms application?
Sorry for my English, it seems to be really bad.
in my app.js, I'm using current.Window rather than lastFocusedWindow
button_element.addEventListener('click', () => {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
arr.push(tabs[0].url)
localStorage.setItem("example", JSON.stringify(arr) )
render(arr)
})
})
That works for pushing the current tab to local storage
I need to send some data to the newly created tab. I found some answers here to implement the listener first and then send a message. My event listener isn't working and can't catch the message.
manifest:
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.1",
"permissions": ["tabs",
"http://*/*",
"https://*/*",
"activeTab"
],
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
}
}
background:
chrome.browserAction.onClicked.addListener((tab)=>{
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
if(tabs.length === 1 ){
chrome.tabs.create({url:"https://www.youtube.com/", active: true}, (tab)=>{
chrome.tabs.executeScript(tab.id, {file:"content.js"},tab=>{
chrome.tabs.sendMessage(tab.id, {"Active Objects": "elo"})
})
})
}
else{
alert("wrong page")
}
});
});
content:
chrome.runtime.onUpdate.addListener(
(request, sender, sendResponse)=>{
alert("elo")
}
);
I've finally got it to work. I didn't actually tested it the first time.
In addition to replacing onUpdate with onMessage in the content script you
might want to add setTimeout functions in the background script to delay the executions of
chrome.tabs.executeScript and chrome.tabs.sendMessage. Otherwise, you might
get (as I have) a runtime.lastError: The tab was closed.
And also you should avoid having multiple function callback arguments named
tab. Otherwise, they get overriden.
I simplified the background script to get it to work. You don't actually need
to query the current tab to create a tab and execute a script inside it. So,
I've simply kept chrome.tabs.create.
background.js:
chrome.browserAction.onClicked.addListener(function (_) {
chrome.tabs.create({url: "https://www.youtube.com/", active: true},
function (yt_tab) {
setTimeout(function () {
chrome.tabs.executeScript(yt_tab.id, {file: "content.js"});
setTimeout(function () {
chrome.tabs.sendMessage(yt_tab.id, {"Active Objects":"elo"});
}, 1000);
}, 1000);
});
});
content.js:
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
console.log(request);
}
);
I'm working on a chrome extension currently, and I keep getting this error:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
I'm trying to pass a message from my background script to my content script. The background script fetches the url of the current tab, and I'm trying to pass that URL to my content script. I've found a few different solutions to this error, but none of them are working for me. From what I understand, it has something to do with the content script not being loaded when the background script tries to send the message, though I've tried some workarounds for that and nothing has worked for me. This is my code:
Background script:
//use a query to get the current URL of the tab
chrome.tabs.query({
active: true,
lastFocusedWindow: true
}, function(tabs){
var currentTab = tabs[0];
var currentUrl = currentTab.url;
//send a message from background script to content script
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
const port = chrome.tabs.connect(tabs[0].id);
port.postMessage({url: currentUrl});
port.onMessage.addListener(function(response){
console.log(response);
});
});
}
);
Content Script:
chrome.runtime.onConnect.addListener(function(port){
port.onMessage.addListener(function(msg){
if(msg.url.includes("amazon")){
console.log("You are on amazon.com");
}
port.postMessage("This is my response!");
});
});
Here is my manifest as well:
{
"manifest_version": 2,
"name": "First Browser Extension",
"version": "1.0.0",
"description": "Add a better description later.",
"page_action": {
"default_icon": "icon.png",
"default_title": "BrowserExtension",
"default_popup": "index.html"
},
"background":{
"scripts": ["background.js"],
"persistent": false
},
"content_scripts":[
{
"matches": ["https://www.amazon.com/*"],
"js": ["content.js"]
}
],
"permissions": [
"tabs",
"activeTab",
"https://*/*"
],
"icons": {"48": "icon.png"}
}
I can't figure out what's going wrong. Any insight would be greatly appreciated!
Edit: updated code
Background
chrome.tabs.query({
active: true,
currentWindow: true //changed lastFocusedWindow to currentWindow
}, function(tabs){
var currentTab = tabs[0];
var currentUrl = currentTab.url;
console.log(currentUrl);
//----------NEW CODE---------------------------
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.contentScriptQuery === "getURL") {
sendResponse({url: currentUrl});
return true; // Will respond asynchronously.
}
});
}
);
Content
chrome.runtime.sendMessage(
{contentScriptQuery: "getURL"},
function(urlFromBackground){
console.log(urlFromBackground.url);
}
);
i am new to Javascript and am trying to implement a google chrome extension. I read the instructions (https://developer.chrome.com/extensions/getstarted), but still I have some troubles with my code.
I have got a popup menu with buttons and I want to get back the DOM content of the current page when a button is clicked.
Therefore i created a contentscript.js and a popup.js. The popup.js asks the contentscript to get the DOM (still needs to be implemented how I do that) and send back the DOM.
I receive the error:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
This is my code:
popup.js
var ads = ["increase", "reduce", "blabla"];
function markAds(text) {
document.getElementById("markAd").innerHTML=ads[0];
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
alert(response.farewell);
});
});
}
document.addEventListener('DOMContentLoaded', function() {
var markAd = document.getElementById('markAd');
// onClick's logic below:
markAd.addEventListener('click', function() {
markAds();
});
});
mainfest.js
{
"name": "Test",
"description": "Test Description",
"version": "0.7",
"permissions": ["contextMenus","activeTab"],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentscript.js"]
}],
"browser_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
contentscript.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});