Background page to communicate with Content Script - google-chrome

I'm having a bit of trouble getting some final bit of code working to complete my extension.
The short version is that I need my background.html page to notify my content script whenever a different tab is selected. At the moment I have the following:
background.html
chrome.tabs.onSelectionChanged.addListener(function( tab_id , info ) {
// some way to call App.resize();
});
content script js file
var App = {
resize: function() {
// logic
}
}
The longer version is that I'm building a fullscreen extension for chrome that works the same as Firefox and Safari on PC. At the moment, when you enter fullscreen mode you can't really navigate to different other tabs unless you use a shortcut and cycle through all your open tabs. My extension shows all the currently opened tabs and you can switch to them, as well as an address bar so you can go to other websites, etc.
I have everything working as I need it, and it's all working nicely except with pages that redirect to others. E.g. with Google Reader, when you open an article in the background, it goes through google's proxy and then redirects to the actual article. This is the only place where it doesn't work. But if I can call the App.resize() function whenever I switch to a new tab, that will fix my problem. (I hope).

It depends on whether you need to inform content scripts on all pages or just the selected tab. I'll give you solutions for both.
background.html (if you need to inform all tabs)
chrome.tabs.onSelectionChanged.addListener(function() {
chrome.windows.getAll({populate: true}, function(windows) {
var w,t;
for (w=0; w<windows.length; w++) {
for (t=0; t<windows[w].tabs.length; t++) {
chrome.tabs.sendRequest(windows[w].tabs[t].id, "resize");
}
}
});
});
background.html (if you only need to inform the newly-selected tab)
chrome.tabs.onSelectionChanged.addListener(function(tabId) {
chrome.tabs.sendRequest(tabId, "resize");
});
content script
var App = {
resize: function() {
// logic
}
};
chrome.extension.onRequest.addListener(function(request) {
if (request === "resize") {
App.resize();
}
});

Related

Chrome extension: (DOM)Debugger API does not work anymore

Our chrome extension does not work correctly anymore since version 37.0.2062.103 (It used to work correctly on chrome version 36.0.1985.143).
Specifically, the debugger API has stopped working for us when we use the DOMDebugger.
See the attached code: (background.js)
chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
if( changeInfo.status == "loading" && tab.active){
var debugId = {tabId:tabId};
chrome.debugger.attach(debugId, '1.0', function() {
chrome.debugger.sendCommand(debugId, 'Debugger.enable', {}, function() {
chrome.debugger.sendCommand(debugId, "DOMDebugger.setEventListenerBreakpoint", {'eventName':'click'},
function(result) {
console.log('registering click');
});
});
});
}
});
chrome.debugger.onEvent.addListener(onEvent);
function onEvent(debuggeeId, method,params) {
if(method=="Debugger.paused"){
console.log('DONE!');
}
};
The extension successfully starts the debugger. we get the yellow debugger ribbon.
We also see the 'registering click' msg in the console. the result argument is an empty object {} (line 8).
However upon clicking on a button that has a click event listener nothing happens.
It used to work without any issues.
It seems like it regressed with https://codereview.chromium.org/305753005. One needs to call "DOM.enable" for it to work now. On the Chrome side, we should implicitly enable DOM domain upon setEventListenerBreakpoint for backwards compatibility. Unfortunately it already squeezed into the stable release.

Chrome Extension: Insert a clickable image using a content script

I know hat it is possible, but I am not quite sure how to do it the 'right' way, as to ensure there are no conflicts.
I came across this question: Cannot call functions to content scripts by clicking on image . But it is so convoluted with random comments that it's hard to understand what the corrected way was.
Use case:
Html pages have a div on the page where they expect anyone using the Chrome extension to inject a picture. When users click on he picture, I want to somehow notify an event script. So I know I need to register a listener so the code inserted messages the event script.
Can I get some indication on what code to inject through the content script? I saw that sometimes injecting jquery directly is advised.
I am trying to avoid having the html page to post a message to itself so it can be intercepted. Thanks
With the help of Jquery something like this would capture the image onclick event and allow you to pass a message to a background page in the Chrome Extension:
$("img").click(function(){
var imageSrc = $(this).attr("src");
//Post to a background page in the Chrome Extension
chrome.extension.sendMessage({ cmd: "postImage", data: { imgSrc: imageSrc } }, function (response) {
return response;
});
});
Then in your background.js create a listener for the message:
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.cmd == "postImage") {
var imageSrc = request.data.imgSrc;
}
});

Protecting iFrame - Only allow it to work on one domain

I have a Widget that I created and I am embedding it on other websites using an iFrame. What I want to do is make sure no one can view the source and copy the iFrame code and put it on their own website.
I can store the URL that it should be allowed on in the database. I've seen it done before, one site had a long encrypted code and if it didn't match with the domain then it said Access Denied..
Does anyone know how I can do this?
Thanks!
No you can't do this. The best thing you can do is the following:
if (window.top.location.host != "hostname") {
document.body.innerHTML = "Access Denied";
}
Add the above to your JavaScript and then use a JavaSript obfuscator
You cannot prevent people from looking at your HTML, but there are some headers can allow you to specify what sites can embed your iframe. Take a look at the X-Frame-Options header and the frame-ancestors directive of Content-Security-Policy. Browsers that respect it will refuse to load the iframe when embedded into someone else's site.
On the server in the code for the page displayed in the IFRAME, check the value of the Referer header. Unless this header has been blocked for privacy reasons, it contains the URL of the page which hosts the IFRAME.
What you are asking for is pretty much impossible. If you make the source available on the web someone can copy it one way or another. Any javascript tricks can be defeated by using low level tools like wget or curl.
So even if you protect it, you're still going to find that someone could in theory copy the code (as the browser would receive it) and could if so determined put it on their own website.
I faced the same problem, but I return the user on a home page. I spread the decision.
It has to be placed where there is iframe
<script>
$(window).load(function () {
var timetoEnd = '';
var dstHost = 'YOUR-ALLOW-HOST';
var backToUrl = 'BACK-TO-URL';
function checkHost(){
var win = window.frames.YOUR-IFRAME-NAME;
win.postMessage('checkHost', dstHost);
console.log('msg Sended');
clearInterval(timetoEnd);
timetoEnd = setInterval(function () {
window.location.href = backToUrl;
}, 5000);
}
function validHost(event) {
if (event.data == 'checkHostTrue') {
clearInterval(timetoEnd);
console.log('checkHostTrue');
} else {
return;
}
}
window.addEventListener("message", validHost, false);
checkHost();
setInterval(function () {
checkHost();
}, 10000
);
});
</script>
It has to be placed into your src iframe
<script>
function receiveMessage(event)
{
if(event.data=='checkHost'){
event.source.postMessage("checkHostTrue",
event.origin);
} else {
return;
}
}
window.addEventListener("message", receiveMessage, false);
</script>
I know it's kinda old topic but I have code that you just put in <script> tag and it should prevent most of curious people from looking at html files from iFrame:
if(window.top.location.pathname === window.location.pathname){
history.back()
}

Chrome extension: how to constantly check URLs on new tabs and then respond with an action for certain URLs?

Hi—I'm not a student or a programmer by trade, but I'm trying to knock up a quick prototype to get an idea across. I've cobbled together some code from other StackOverflow questions, and I've almost got what I need, but I'm having trouble with one thing: the extension will run exactly once, but no more, until I refresh the extension via chrome://extensions. I'm guessing there's something wrong with the element of this program that listens for a new URL, but I can't figure out how to keep that element listening constantly. This code runs in background.js right now, though I've also tried it in background.html.
Basically, I'd like the extension to check the URL of a tab any time the user visits a new page (either by typing the URL herself or clicking through to one), and, if the URL appears in the plugin's internal URL list, to pop up a short notification. I have this so far:
// Called when the url of a tab changes.
// So we can notify users
var notification = webkitNotifications.createNotification(
'48.png',
'Alert!'
);
// Called when the url of a tab changes.
function checkForValidUrl(tab) {
// Compare with a the URL
if (tab.url.match(/google/)) {
//then
notification.show();
}
};
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "loading") {
checkForValidUrl(tab);
}
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo){
chrome.tabs.getSelected(null, function(tab){
checkForValidUrl(tab);
});
});
I fixed this after hacking it around a little bit -- I don't really have the vocabulary to explain what I did but I thought I'd post the code in case someone else has the same (simple) problem later.
function checkForValidUrl(tabId, changeInfo, tab) {
var notification = webkitNotifications.createNotification(
'48.png',
'Alert!',
'Watch out for your privacy!'
);
// Compare with the URL
if (tab.url.match(/google/)) {
//then
notification.show();
}
};
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "loading") {
checkForValidUrl(tabId, changeInfo, tab);
}
});

Open a "Help" page after Chrome extension is installed first time

I am new to Chrome extension. I have a question about how to make the extension to open a "Help" page automatically after installation. Currently, I am able to check whether the extension is running the first time or not by saving a value into localStorage. But this checking is only carried out when using click the icon on the tool bar. Just wondering if there is a way that likes FF extension which uses the javascript in to open a help page after the installation. Thanks.
Edit:
Thanks for the answer from davgothic. I have solved this problem.
I have another question about the popup. My extension checks the url of current tab,
if OK(url){
//open a tab and do something
}
else{
//display popup
}
Is it possible to show the popup in this way?
Check this updated and most reliable solution provided by Chrome: chrome.runtime Event
chrome.runtime.onInstalled.addListener(function (object) {
let externalUrl = "http://yoursite.com/";
let internalUrl = chrome.runtime.getURL("views/onboarding.html");
if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
chrome.tabs.create({ url: externalUrl }, function (tab) {
console.log("New tab launched with http://yoursite.com/");
});
}
});
Add this to your background.js I mean the the page you defined on manifest like following,
....
"background": {
"scripts": ["background.js"],
"persistent": false
}
...
UPDATE: This method is no longer recommended. Please see Nuhil's more recent answer below.
I believe what you need to do is put something like this into a script in the <head> section of your extension's background page, e.g. background.html
function install_notice() {
if (localStorage.getItem('install_time'))
return;
var now = new Date().getTime();
localStorage.setItem('install_time', now);
chrome.tabs.create({url: "installed.html"});
}
install_notice();
As of now (Aug 2022) the right way to execute code on first install or update of an extension using Manifest V3 is by using the runtime.onInstalled event.
This event is documented here: https://developer.chrome.com/extensions/runtime#event-onInstalled
There is one example for this exact case in the docs now:
https://developer.chrome.com/docs/extensions/reference/tabs/#opening-an-extension-page-in-a-new-tab
Note: This example above is wrong as the callback function parameter is Object with the key reason and not reason directly.
And another example here (this one is correct but does not open a tab):
https://developer.chrome.com/docs/extensions/reference/runtime/#example-uninstall-url
chrome.runtime.onInstalled.addListener((details) => {
if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
// Code to be executed on first install
// eg. open a tab with a url
chrome.tabs.create({
url: "https://google.com"
});
} else if (details.reason === chrome.runtime.OnInstalledReason.UPDATE) {
// When extension is updated
} else if (details.reason === chrome.runtime.OnInstalledReason.CHROME_UPDATE) {
// When browser is updated
} else if (details.reason === chrome.runtime.OnInstalledReason.SHARED_MODULE_UPDATE) {
// When a shared module is updated
}
});
This code can be added to a background service worker: https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/
It would be better to place a "version" number so you can know when an extension is updated or installed.
It has been answered here:
Detect Chrome extension first run / update
All you need to do is adding the snippet below to your background.js file
chrome.runtime.onInstalled.addListener(function (object) {
chrome.tabs.create({url: `chrome-extension://${chrome.runtime.id}/options.html`}, function (tab) {
console.log("options page opened");
});
});