I am developing a chrome extension right now. It serves its purpose but the problem is that the content script gets executed on its own whenever I open a new tab and visit a site. The problem is that there is an alert in the content script & it starts to become annoying when the alert gets triggered on visiting every new site.
Currently I am triggering the content script from my background script by using the chrome.tabs.executeScript API. However, I have noticed that whenever I open a new tab & visit a new site, the code in content script gets executed automatically even if the criteria for it getting triggered hasn't been met in the background script.
Is this the normal behavior? Is this how all chrome extensions are supposed to work? If yes, is there a way to prevent this? For now, I have declared my content script as a background script, but I would still like to find a fix for this.
Here is my manifest - manifest.json:
"content_scripts" : [
{
"matches" : [ "<all_urls>"],
"js": ["raisealert.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
Here is the background script - background.js:
if(condition met)
chrome.tabs.executeScript(null, {
code: 'var config = ' + JSON.stringify(config)
}, function() {
chrome.tabs.executeScript(null, {file: 'raisealert.js'}, function() {
console.log("Alarm triggered");
});
});
And here is the content script - raisealert.js
alert("sample alert raised");
You can have a content_script load automatically and with no programming effort on your part by calling it up in the content_scripts section of the manifest.
You can do this for all URLs or you can define fairly fine-grained url patterns that the script should load on. See Manifest injection
If you want to inject the script conditionally on criteria other than just the URL then you can use programmatic injection - this could be based on criteria such as the content of the page or whether someone clicks the browser action button or selects a right click context menu option you've defined.
Programmatic injection will often use the chrome.tabs.onupdated listener to check for particular urls or content and then inject or not.
If your extension is something that potentially anyone might want to use on any page then it's usually best to inject it based on a deliberate action by the user, e.g. in your case, as you say, it is annoying (understatement) to get an alert on every tab and page that loads.
Even if your script has no visible annoyances, having it load in every page automatically is rarely a good idea unless it has near zero impact on the page.
If it's designed to work on a specific site then injecting via the manifest with an appropriate url pattern filter is often best.
Related
I have a website with "add to homescreen" enabled - i.e. I have got a manifest.json file with "display": "standalone".
The problem I'm having is when I open the website via the homescreen shortcut, it will resume from when I last accessed it. I have to pull to refresh to make it fetch the latest content.
My question is, is it possible to make it do a refresh every time it is accessed?
If you'd like to take specific action inside of your web app whenever it moves from the "background" to the "foreground" again, you could listen for the appropriate events using the Page Lifecycle API.
The most straightforward way of doing this would probably be to listen for visibilitychange events, and programmatically refresh your data source when you detect that the current visibilityState has transitioned to 'visible'.
This could look like:
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
// Your refresh logic goes here.
}
});
I am trying to develop a chrome extension which saves the url of webpages opened in all tabs and then load them whenever needed. Now I know content scripts, background scripts and popup.js. Content scripts mainly deal with the content of the loaded webpage and they have less chrome api interactions, background scripts are executed in an isolated environment and we can use all chrome api methods, popup.js is simply javascript that runs in context of popup.html.
Now here is my problem, I have a button in popup.html named "save" and on click of that button I want to save all the webpage urls opened in multiple tabs under one window. How can I do that?
Should I write a content or a background script?
Sorry for my noobish question. I am new to chrome api. Any help/suggestions?
Neither content script or background page is needed. You could do that just in popup.js, since popup page actually runs in the same context with extension.
In your popup.js, just call chrome.tabs.query to get tab info, including url (you would need to declare tabs permissions in manifest.json). If you want to specify window id, either use WINDOW_ID_CURRENT or retrieve it through other ways (depends on your logic)
chrome.tabs.query({ windowId: YOUR_WINDOW_ID }, (tabs) => {
tabs.forEach((tab) => console.log(tab.url));
});
I am learning to create a chrome extension. To start, I am trying to just gather all links on the page and display them in the popup window of the extension when the button is clicked. I can't seem to get it right. I am able to use messages and send a message from my chrome tab to the extension. But when I try to pass the array of a tags, then it breaks.
My content script:
window.addEventListener('DOMContentLoaded', function () {
chrome.tabs.executeScript(null, {file: "content.js"});
});
My extension script:
window.addEventListener('message', function(e) {
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Content script received: " + event.data.text);
console.log(event.data.links);
}
}, false);
if I dont do the links, it works fine and sends the messages. So I can't find another way to send all the links to the extension so I can process them. I have this in a github repo here https://github.com/skiftio/chrome-linkman
Your understanding of the architecture is a bit off. Please read through the Overview page, especially the Architecture part.
I'll even include a helpful picture here:
The popup is counted as "other pages" on this picture. It's an HTML page on its own domain (chrome-extension://yourextensionidhere), which is created when you open the popup and destroyed when you close it.
A content script is a script attached to a real Chrome tab; it gets access to its DOM, but is isolated from the page's own scripts. It also has very limited access to Chrome APIs.
More importantly, there are 2 ways of telling Chrome to add a content script to the page: you can declare it in the manifest so that Chrome automatically injects it upon navigation, or you can programmatically inject it from somewhere in your extension pages. You are mixing up those two.
Your manifest entry refers to scripts.js which is NOT a content script and you should not call it such. For instance, chrome.tabs.executeScript is not allowed to be called from a content script, and it will just throw an error. Since you're also injecting the script from the popup, you should just remove the section from the manifest, you don't need it.
As for messaging, you're trying to use window.postMessage, but this is not standard in Chrome extensions.
Take a look at the full Messaging docs, and I recently gave a short overview here.
In your situation, you could add a listener to chrome.runtime.onMessage to the popup and send a message with chrome.runtime.sendMessage from the content script:
/* --- Popup code (scripts.js) --- */
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
if(message.links) {
/* do work */
}
});
chrome.tabs.executeScript({file: "content.js"});
/* --- Content script code (content.js) --- */
var links = document.getElementsByTagName("a");
chrome.runtime.sendMessage({links: links});
After messing around with Chrome Extension I noticed that when you are on the chrome://extensions page a background script initiated in the manifest file will run where as if you are just browsing the internet or on another other page besides the extension page the background script will not run.
Here is what I mean:
In my Manifest file:
"background": {
"scripts": ["jquery-latest.js","background.js"]
},
Now in the background.js file:
$(document).ready(function(){
alert("working");
});
I use a simple alert function to see if this will work and found out that alert("working"); only gets displayed when I am on the chrome://extension directory. If I go to google.com or something of that sort, no cigar.
My question lies in, why does this happen? How do I change it so it does alert no matter what.
The background script should be viewed as "running in the background of the Chrome browser".
Your desired effect (running a script for every page) is actually a task for content scripts.
To learn more, read https://developer.chrome.com/extensions/overview.html#arch.
It is because you are using the background page .. use the event page instead by slightly modifying the manifest.json..
Try adding this:
"background": {
"scripts": ["jquery-latest.js","background.js"],
"persistent": false
},
for more details on event pages check this : https://developer.chrome.com/extensions/event_pages
The effect is produced because whenever you load chrome://extensions it forces the extensions to reload, the same behavior can be reproduced using CTRL+R. So every time, the background page got a fresh reload, which doesn't happen in case of other pages.
The background script is a script running in the background to handle majority of chrome events that content scripts cannot. Content scripts are purely the content of the each page. Both cannot speak to each other, however, you can give the scripts listeners (e.g. chrome.browserAction.addListener(myFunction) plays the function when the button in the top right of your screen for the extension is clicked) order to find out whether a button has been pressed or even send a message from the background script into the page's console.
https://youtu.be/ew9ut7ixIlI
This video was a great introduction for me about background scripts, however, the part where he begins to talk about the listeners and such is 6:30.
I am trying to write a JavaScript function that will open my extension like when the extension icon is clicked. I know how to open my extension in a new tab:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
But I want to open a pop-up in the upper right corner of the browser, like when the extension icon is clicked.
The Chromium dev team has explicitly said they will not enable this functionality. See Feature request: open extension popup bubble programmatically :
The philosophy for browser and page action popups is that they must be triggered by user action. Our suggestion is to use the new html notifications feature...
Desktop notifications can be used progammatically to present the user with a small HTML page much like your popup. It's not a perfect substitution, but it might provide the type of functionality you need.
Chrome team did create a method to open the popup programmatically, but it's only enabled as a private API, and plans to make it generally available have stalled due to security concerns.
So, as of March 2018 as of now, you still can't do it.
Short answer is that you cannot open browserAction programmatically. But you can create a dialog with your content script which emulates your browserAction and display that isntead (programmatically). However you won't be able to access your extension's background page from this popup directly as you can from your popup.html. You will have to pass message instead to your extension.
As mentioned there is no public API for this.
One workaround I have come up with is launching the extension as an iframe inside a content script with a button click. Whereby the background script emits the extension URL to the content script to be set as the iframe's src, something like below.
background.js
browser.runtime.onMessage.addListener((request) => {
if (request.open) {
return new Promise(resolve => {
chrome.browserAction.getPopup({}, (popup) => {
return resolve(popup)
})
})
}
})
content-scipt.js
const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')
b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
evt.preventDefault()
chrome.runtime.sendMessage({ open: true }, (response) => {
i.src = response
p.appendChild(i)
})
})
p.appendChild(b)
This opens the extension in the DOM of the page the script is running on. You will also need to add the below to the manifest.
manifest.json
....
"web_accessible_resources": [
"popup.html"
]
....
You could emulate the popup by displaying a fixed html element on the page in the same location the popup would be and style it to look like the popup.
I had the same requirement: When the user clicks on the extension icon a small popup should open. In my case, I was writing an extension which will give updates on selective stocks whenever the icon is clicked. This is how my popup looked.
If you were having the same requirement then please read the answer below.
This is how my manifest.json file looked.
All the heavy lifting was handled by manifest.json file only. There is a section browser_action inside which there is a key called default_popup, just put the name of the HTML file that you want the popup to display.
I wanted my extension to work on all the pages that's why I added the attribute matches under content_scripts. I really didn't need to put the jquery file jquery-3.2.1.js inside the js array but the extension manager was not allowing me to keep that array empty.
Hope this helps, do comment if you have any doubt regarding the answer.