I am developing a browser extension using crossrider. I have some resource pages like popup.html and popup.js. In popup.html, there is a form and when user submit the form I want to send the data to my server, which is straight forward. But I also want to send the active tab url along with the form data. But we can get the active tab url in background.js only.
To do this I need to send the form data to background.js and then post them to my server.
So my question is how to send data from popup.js (popup window) to background.js ?
In answer to your direct question, you can send data from the popup scope to the background scope using appAPI.message.toBackground.
However, I think it would be more efficient to get the active tab's URL when the popup is opened so that it's available in the popup when the form is submitted. You can achieve this by requesting the active tab's URL directly from the active tab and saving the response in a var in the popup scope, as follows:
popup.html:
function crossriderMain($) {
// var to store active tab's URL
var activeTabUrl = null;
// Message listener for response from active tab
appAPI.message.addListener(function(msg) {
if (msg.type === 'active-tab-url') activeTabUrl = msg.url;
});
// Request URL from active tab
appAPI.message.toActiveTab({type: 'active-tab-url'});
// THE REST OF YOUR CODE
}
extension.js:
appAPI.ready(function($) {
// Message listener
appAPI.message.addListener(function(msg) {
if (msg.type === 'active-tab-url')
// Send active tab's URL to popup
appAPI.message.toPopup({
type: 'active-tab-url',
url:encodeURIComponent(location.href)
});
});
// THE REST OF YOUR CODE
});
[Disclaimer: I am a Crossrider employee]
Related
I am working on a browser extension, that opens a website in a new tab and checks if the user is logged in on the website.
//Inside background-script.js
var creating = browser.tabs.create({
url: "https://www.mywebsite.com/"
});
creating.then(onSuccess, onError);
function onSuccess(tab) {
console.log(tab.id);
ports[tab.id].postMessage({msgType: 'CheckLoginStatus'}); //Send a message to content-script to check the login status.
}
The problem is that the function onSuccess is called after the tab is created but before the content of the "https://www.mywebsite.com/" has been loaded in the tab. Is there way to delay this function call till the tab is completely loaded or at-least get the status of the tab to know if its loaded.
I'm new to javascript and I want to code a firefox web extension.
I have a browser action button with a popup. but I didn't define the popup in the manifest, i set it in javascript code, because the click event won't be fired when the popup is defined. So here is the important part of my background script:
browser.browserAction.onClicked.addListener((tab) => {
var tabUrl = tab.url;
browser.browserAction.setPopup({ popup: "/popup/popup.html" });
browser.browserAction.openPopup();
browser.browserAction.setPopup({ popup: "" });
});
In this event the tab object is passed, so I can use the url.
This file is in the /background_scripts folder.
The popup is in the /popup folder. It's a html file with 2 menuitems.
In the popup.js I have an event to get the click:
document.addEventListener("click", (e) => {
if(e.target.id == menuItem1)
{
...
//here i want to use the url of the current tab
});
How I can get the tab object or the url in my popup code?
The tabs.tab.getCurrent() method doesn't work as I understand according to this:
tabs.getCurrent() result is undefined?
and this
How do I include a JavaScript file in another JavaScript file?
doesn't work too.
How am I going to write something when user clicks extension icon and loads the window?
I've already tried
window.onload = function() {
console.log("das");
}
and ]
$(document).ready(function(){
console.log('document is ready');
});
but still there isn't any log?
Maybe it's not the best idea but you can use chrome.tabs.sendMessage and chrome.runtime.onMessage.addListener to communicate between contentscript.js and popup.js
contentscript.js is running directly in page scope so you can easily detect when page is ready. After that you can send a message chrome.tabs.sendMessage(tabs.id, {action: 'pageReady'});. In popup.js you are listening to:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action === 'pageReady') {
// Do what you want to do on page ready
}
});
It should works good for you. You can also send response to the caller:
contentscript.js send information to the popup.js that page is ready.
popup.js do what you want to do (show table).
popup.js send information to the contentscript.js that table is added.
EDIT
I'm not sure about my solution because I found information that:
The popup, while being an extension page, is not a background page. It
is only accessible when it is open
I don't know if it is possible to listen on events in popup. You need to check it.
So I'm just trying to get a response every time the extension button is clicked. So like with AdBlock how this comes down
But instead I'm just trying to do a console.log() every time the button is clicked without any visible popups.
I've tried this so far
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
switch (request.directive) {
case "popup-click":
// execute the content script
chrome.tabs.executeScript(null, { // defaults to the current tab
file: "real.js", // script to inject into page and run in sandbox
allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
});
sendResponse({}); // sending back empty response to sender
break;
default:
// helps debug when request directive doesn't match
alert("Unmatched request of '" + request + "' from script to background.js from " + sender);
}
}
);
Then my real.js
console.log("Yo");
But sadly I only get a Yo when it launches. Any ideas?
If you don't have a popup (nothing shows when you click the button), then there is an event that will fire when the button is clicked:
chrome.browserAction.onClicked
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
To use:
// In your background script
chrome.browserAction.onClicked.addListener( function() {
// Do stuff
});
If, however, you do have a popup, then, as the docs mention, this event will not fire. Then your code is more appropriate: you just need to send a message from the popup and catch it in the background script whenever it is opened. See a full example in this answer.
I'm trying to create a popup chrome extension that shows information about the DOM in the current page, which seems to require messaging. I've been able to send messages to the background, but I need the data to be specific to the current page, as the background is identical to all popups/pages.
In popup.js, I send a message when the DOM is loaded (should trigger when popup is clicked?)
document.addEventListener('DOMContentLoaded', function() {
chrome.runtime.sendMessage({method: "getTableData"}, function response() {
});
});
I also have a listener in the contentscript.js (and background.js for testing)
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.method == "getTableData") {
console.log("table request found!");
}
});
Then, when I activate the popup, the background console outputs table request found!, while
the console for the current page doesn't.
Thanks.
You need to use chrome.tabs.sendMessage instead of chrome.runtime.sendMessage to send a message to a content script.