I have made a plugin using the addon SDK. The plugin adds a button to the nav-bar, and when it is clicked it opens a new tab with some data from an internal indexeddb using code similar to this:
// main.js
tabs.open({
url: self.data.url('index.html'),
onReady: runScript
});
function runScript(tab) {
var worker = tab.attach({
contentScriptFile: [
self.data.url("script.js")]
});
}
Everything works fine, except for the scenario where the user quits Firefox and opens it again, that tab will be restored, but it will contain nothing because it hasn't been triggered by the addon button click. This is because the scripts on the page are loaded through the runScript function in main.js, which is not executed when the HTML file is loaded on a restart.
How can I get this tab to have the same behavior on page startup than on button clicking?
I think you'll have to reload the tab:
exports.main = function(options) {
if(options.reason==='startup') for (var i=tabs.length-1; i>=0; i--) {
var tab = tabs[i];
if (tab.url!==self.data.url('index.html')) continue;
tab.once('ready', runScript.bind(null, tab));
tab.reload();
/* If it can't reload the tab,
use tab.url = self.data.url('index.html'); */
}
// ...
}
This a bug I had reported it awhile ago on bugzilla here
I added your topic as an example.
So what you have to do for now, is onReady, you have to turn you body into html datauri and set the location of the tab to this contents.
For example on ready:
var htmlDataUri = 'data:text/html,' + encodeURIComponent(document.documentElement.innerHTML);
//end make htmldatauri
document.location = htmlDataUri;
Related
I am trying to automate a scenario where I click on a button and its opens up a pdf document in new tab. When the test fails, a json object is displayed instead of the pdf document.
I use this code :
element(by.id('MyButton')).click().then(function () {
browser.getAllWindowHandles().then(function (handles) {
newWindowHandle = handles[1]; // this is your new window
browser.switchTo().window(newWindowHandle).then(function () {
var EC = protractor.ExpectedConditions;
// Waits for the element is not present on the dom.
browser.wait(EC.stalenessOf($('#formattedJson')), 5000);
});
});
});
I can open the new tab but when I dont know how to check the content (pdf or json object).
Some advices would be appreciated.
For instance I have the error :
Failed: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See http://git.io/v4gXM for details"
Thanks in advance.
;-)
Probably because the window that is rendering your pdf isn't an angular page. You can tell protractor not to wait for angular by using browser.waitForAngularEnabled(false). You should do this right before your call to switch window. Just remember to turn it back on when you close the window and switch back to your main app window. Check out this documentation for more info.
browser.getAllWindowHandles().then(function (handles) {
newWindowHandle = handles[1]; // this is your new window
browser.waitForAngularEnabled(false); //add this and it should work
browser.switchTo().window(newWindowHandle).then(function () {
var EC = protractor.ExpectedConditions;
// Waits for the element is not present on the dom.
browser.wait(EC.stalenessOf($('#formattedJson')), 5000);
});
}):
I'm trying to add a script tag to every dom page through privileged chrome, so far i'm able to get the first pageload of a tab, but after that, the script does nothing, I'm using Firefox Nightly 44.0. What am i doing wrong???
Documents I'm following:
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/On_page_load
https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Intercepting_Page_Loads
mozilla-central/browser/base/content/browser.xul (line: 74)
<script type="application/x-javascript" src="chrome://browser/content/yyy/x.js" />
chrome://browser/content/yyy/x.js
var myExtension = {
init: function() {
// The event can be DOMContentLoaded, pageshow, pagehide, load or unload.
if(gBrowser) gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
},
onPageLoad: function(aEvent) {
var doc = aEvent.originalTarget; // doc is document that triggered the event
var win = doc.defaultView; // win is the window for the doc
// test desired conditions and do something
// if (doc.nodeName != "#document") return; // only documents
// if (win != win.top) return; //only top window.
// if (win.frameElement) return; // skip iframes/frames
alert("page is loaded \n" +doc.location.href);
}
}
window.addEventListener("load", function load(event){
window.removeEventListener("load", load, false); //remove listener, no longer needed
myExtension.init();
},false);
mozilla-central/browser/base/jar.mn
content/browser/yyy/x.js (content/yyy/x.js)
You'll want to use loadFrameScript with argument of true to listen to future pages. Here are examples: https://github.com/mdn/e10s-example-addons/tree/master/run-script-in-all-pages
globalMM.loadFrameScript("chrome://modify-all-pages/content/frame-script.js", true);
This is documented here: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader#loadFrameScript%28%29
To stop it from loading in new tabs, then you have to use removeDelayedFrameScript
That github link also shows an example of how to do it with addon-sdk content-scripts.
I'm porting a Chrome extension to a Firefox extension and due to the nature of the website that it runs on, I need to monitor the pushState.
Chrome Extensions has a handy way to handle this: chrome.webNavigation.onHistoryStateUpdated. The way that I use it in the Chrome extension is as follows:
chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
var tabUrl = details.url;
if (isTabUrlValid(tabUrl)) {
$.get(tabUrl, function(data) {
var videoUrl = $(data).find('meta[itemprop=contentURL]').prop('content');
videoUrl = validateUrl(videoUrl);
videoUrl5k = make5kUrl(videoUrl);
});
}
});
I need to do the same thing for the Firefox Extension, but I haven't found any good answers. I've tried doing the answer mentioned here: How to get notified about changes of the history via history.pushState?
(function(history) {
var pushState = history.pushState;
history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
var tabUrl = tabs.activeTab.url;
console.log("UPDATED TAB URL: " + tabUrl);
if (isTabUrlValid(tabUrl)) {
$.get(tabUrl, function(data) {
var videoUrl = $(data).find('meta[itemprop=contentURL]').prop('content');
videoUrl = validateUrl(videoUrl);
videoUrl5k = make5kUrl(videoUrl);
});
}
return pushState.apply(history, arguments);
};
})(window.history);
The problem is that when I do cfx run it complains that history/window is undefined and therefore never gets detected. I think this is due to it being within the SDK, but I don't know of a good workaround.
Any thoughts?
Edit: I looked at #willma's answer below and I don't think that would work for me. The issue is that the URL is updated via pushState and the DOM is not... Is there any good way replicate what I do in the chrome extension?
Edit: Here's the pageMod portion
pageMod.PageMod({
attachTo: 'top', // Don't attach to iFrames --> http://goo.gl/b6b1Iv
include: [URLs],
contentScriptFile: [data.url("jquery-2.1.1.min.js"),
data.url("csScript.js")],
onAttach: function(worker) {
worker.port.on('url', function(url) {
var videoUrl = validateUrl(url);
videoUrl5k = make5kUrl(videoUrl);
console.log("--5K URL--: " + videoUrl5k);
});
}
});
That history code needs to get injected into a tab using a content script. Right now your logic says when the history event occurs, check to see if the tab URL is valid.
In Firefox, the logic will be the other way around: when a tab is opened, check if its URL is valid, and if so, then attach a script to it that will monitor for the history event. To do so you'll need to use a Page Mod.
Edit: All the code
One key concept you're missing is the difference between a content script and a main/library script. The library scripts are stored in lib and have access to all the SDK modules, but don't have access to the DOM, window object… The content scripts are stored in data, are injected into a page using the PageMod or tabs modules, can access the dom and window objects, but have no access to any SDK modules. Content scripts are essentially like the page scripts you'd attach your standard HTML page (with <script></script>) with the caveats that they can't share variables other page scripts but they can communicate with the main scripts.
The only reason I bring this up is because your initial problem was trying to access the window object from a main script and the problem in your fiddle is that you're trying to access the tabs module inside a content script. It's worth reading the topmost link in this answer if this is still confusing.
main.js
const { PageMod } = require('sdk/page-mod');
var sendXHR = function(url) {
// Do something with the new URL
// See Request Module docs (below) for sending XHRs from main script.
}
const pageMod = PageMod({
attachTo: 'top',
include: '*',
onAttach: function(worker) {
worker.port.on('newURL', sendXHR);
}
});
content.js
var sendNewUrlToMain = function() {
self.port.emit('newURL', location.href);
}
var pushState = window.history.pushState;
window.history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
sendNewUrlToMain();
return pushState.apply(history, arguments);
}
window.addEventListener('hashchange', sendNewUrlToMain);
Here are the request module docs, for making XHRs.
NB: if you don't want to use the request module (the only reason being that you already have standard XHR code for your chrome extension and don't want to take the time to learn/rewrite that code), you can send a standard XHR from the content script, but in doing so, you risk allowing the user to close the tab and thus destroy the script before your XHR callbacks are executed.
I develop my first firefox extension. My usecase (already sucessfully implemented as a chrome extension):
Inject CSS of a specific page
Default load: contentscript-on.js
On Click icon (icon-on.png / icon-off.png) switch from contentscript-on.js to contentscript-off.js and backward
The contentscript-on.js already works on page load. I´ve searched a lot to find help or an example for my usecase. Any ideas?
Thank you very much!
main.js
var pageMod = require("sdk/page-mod");
var self = require("sdk/self");
pageMod.PageMod({
include: "https://app.example.de/dashboard",
contentScriptFile: [self.data.url("jquery-1.11.0.min.js"), self.data.url("contentscript-on.js")]
});
In my chrome extension, I use a background.js to toggle on / off and switch between the scripts
//toggle = true, because the contenscript-on.js is already loaded on initial loading of the page
var toggle = true;
chrome.browserAction.onClicked.addListener(function(tab) {
toggle = !toggle;
if(toggle){
//change the icon after pushed the icon to On
chrome.browserAction.setIcon({path: "icon-on.png", tabId:tab.id});
//start the content script to hide dashboard
chrome.tabs.executeScript({file:"contentscript-on.js"});
}
else{
//change the icon after pushed the icon to Off
chrome.browserAction.setIcon({path: "icon-off.png", tabId:tab.id});
//start the content script to hide dashboard
chrome.tabs.executeScript({file:"contentscript-off.js"});
}
});
Is there a similar way to this in firefox extensions?
The PageMod constructor has an optional onAttach property which passes a content worker to your function. This worker can be destroyed to remove the scripts from the page
var contentWorker; // Global (or greater scope) variable
// …
onAttach: function(worker) {
contentWorker = worker;
}
Then, in your click listener
var tab = contentWorker.tab;
contentWorker.destroy();
contentWorker = tab.attach( {
contentScriptFile: [self.data.url("jquery-1.11.0.min.js"), self.data.url("contentscript-off.js")]
});
Frankly, it would probably be easier just to attach both and toggle them somehow from within the content script code
As a side note, there's a new toggle button that you can can use that will have an activated/deactivated look that sounds like it would be good for your scenario.
Well, I'm developing a firefox addon that reload a given set of url automatically with some modification. Its not possible to show the whole code. So, I've just copy paste the part of the code which is giving me the error.
The DOMContentLoaded event is suppose to be triggered everything a page is loaded, and it do it properly. The problem is that, if i open a new tab, then DOMContentLoaded event is not triggered in the old tab.
//Any code here runs only for the first time u start the browser
window.addEventListener("load", function() { myExtension.init(); }, false);
var myExtension = {
init: function()
{
var appcontent = document.getElementById("appcontent");
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
},
onPageLoad: function(aEvent)
{
var doc = aEvent.originalTarget; // doc is document triggered "onload" event
//execute on one the top page (not on iframes)
if ((aEvent.originalTarget.nodeName == '#document') && (aEvent.originalTarget.defaultView.location.href == gBrowser.currentURI.spec))
{setTimeout(function(){showInError(doc.location='about:home'}, 500);}
},
}
I'd like to write the problem in a simple way (sorry for my bad English)
1) i run firefox, and the tab (say tab no.1) is continuously reloaded as i want.
2) the tab no.1 page continues to load repeatedly if i leave the page uninterrupted(that's what it want)
3) if i open a new tab (say tab no. 2), the new tab (tab no. 2) begins to reload continuously as i wanted. However, the tab no. 1 stops reloading.
what i want is to to keep on reloading both tab no 1 and tab no. 2. How to do it? what is wrong is my code?
It looks like you are executing the script only on currently displayed page (active tab).
If you want to execute it on other tabs, you should attach event listeners to new tabs as you open them (and don't forget to remove them when you close the tab). You can get useful snippets for this functionality at this page:
https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads#WebProgressListeners
Try using gBrowser instead of document.getElementById("appcontent");
gBrowser.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
https://developer.mozilla.org/en/Code_snippets/On_page_load#Basic_onPageLoad_for_a_browser_window