When using this Firefox Addon SDK example:
var tabs = require("sdk/tabs");
tabs.open({
url: "http://www.example.com",
onReady: runScript
});
function runScript(tab) {
tab.attach({
contentScript: "document.body.style.border = '5px solid red';"
});
console.log(tab.title);
}
How can I get the page load time and print it to the console?
(like the app.telemetry Addon does - http://www.apptelemetry.com/de/page-speed-monitor.html)
Just use Navigation Timing API:
window.onload = function(){
setTimeout(function(){
var t = performance.timing;
console.log(t.loadEventEnd - t.responseEnd);
}, 0);
}
Notice that it's a Javascript API so it must run inside a Content Script (ie, it won't work inside your lib/main.js or index.js file).
Related
I am trying to copy 'window.location.href' e.g. the URL of the current page to clipboard from my extension.
My issue is that when I copy the URL to clipboard, it is the extensions URL that is copied and not the page I am visiting.
Extensionbar:
<!DOCTYPE HTML>
<html>
<head>
<button onclick="copyFunction();">Copy</button>
<script type="text/javascript">
function copyFunction() {
var inputDump = document.createElement('input'),
hrefText = window.location.href;
document.body.appendChild(inputDump);
inputDump.value = hrefText;
inputDump.select();
document.execCommand('copy');
document.body.removeChild(inputDump);
}
</script>
</head>
</html>
From my understanding the solution should be this, but I fear I am too clueless how to proceed: https://developer.apple.com/documentation/safariservices/safari_app_extensions/passing_messages_between_safari_app_extensions_and_injected_scripts
This is how I (tried to) proceed, by creating a global.html page and an injected script.
Global page:
<!DOCTYPE HTML>
<script>
safari.application.addEventListener("command", copyFunction, false);
function copyFunctionEvent(event) {
if (event.command == "CopyToClipboard") {
safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("CopyToClipboard", "all");
}
}
</script>
Injected script:
function myextension_openAll(event){
if (event.name == 'CopyToClipboard'){
function copyFunction() {
var inputDump = document.createElement('input'),
hrefText = window.location.href;
document.body.appendChild(inputDump);
inputDump.value = hrefText;
inputDump.select();
document.execCommand('copy');
document.body.removeChild(inputDump);
}
}
safari.self.addEventListener("message", myextension_openAll, true);
Actual:
safari-extension://com.myextension-0000000000/abc123/extensionbar.html
Expected:
http://www.google.com (e.g. if current tab)
From your code above (Extensionbar html), you seem to write legacy Safari extension (.safariextz), and it has been deprecated. See What’s New in Safari and WebKit" session on WWDC18
I recommend you rewrite your code into Safari App Extension by following process, which can be written in Swift. I'm not sure why wrong URL is copied to clipboard in your code, but rewriting your code would solve the problem as a result.
Creating App Extension project
Create App Extension by following [File] -> [New] -> [Project...] then choose [Safari Extension App] on Xcode. Project template contains example of menubar implementation.
Copying location.href by clicking menu bar button
Following code would add functionality to copy location.href when you click menu bar button.
Just paste this into SafariExtensionHandler.swift.
class SafariExtensionHandler: SFSafariExtensionHandler {
override func messageReceived(withName messageName: String, from page: SFSafariPage, userInfo: [String : Any]?) {
// WHen injected script calls safari.extension.dispatchMessage, the message will come here
guard let href = userInfo?["href"] as? String else { return }
// Save href to clipboard
NSPasteboard.general.clearContents()
NSPasteboard.general.setString(href, forType: .string)
}
override func toolbarItemClicked(in window: SFSafariWindow) {
// Request injected script a message to send location.href
window.getActiveTab { currentTab in
currentTab!.getActivePage { currentPage in
currentPage!.dispatchMessageToScript(withName: "getHref", userInfo: nil)
}
}
}
}
And injected script (script.js) as follows.
safari.self.addEventListener("message", function(event) {
console.log("event received");
safari.extension.dispatchMessage("sendHref", { "href": location.href });
});
Working Example
Complete working code here, This may help your work. Good luck :)
https://github.com/horimislime/safari-extension-menubar-example
I am relatively new to JS so apologies for any basic errors I have made here.
I am attempting to insert some JS on our site that will detect if the user has Flash enabled & the site is able to launch a popup, if these fail the user will be directed to a support page to resolve these.
The code works without issue on Chrome and Firefox, the issue I am having is on IE the popup which launches as a test is not being closed by the script.
Am I missing something glaringly obvious?
function loadpopunder(){
var popupBlockerChecker = {
check: function(popup_window){
var _scope = this;
if (popup_window) {
if(/chrome/.test(navigator.userAgent.toLowerCase())){
setTimeout(function () {
_scope._is_popup_blocked(_scope, popup_window);
},250);
}else{
popup_window.onload = function () {
_scope._is_popup_blocked(_scope, popup_window);
};
}
}else{
_scope._displayError();
}
},
_is_popup_blocked: function(scope, popup_window){
if ((popup_window.outerHeight > 0)===true)
popup.close();
},
_displayError: function(){
popupFail=true;
}
};
var popup = window.open("http://www.google.com", '_blank', "width=10, height=10, left=1, top=1, scrollbars=no, resizable=no");
popupBlockerChecker.check(popup);
}
loadpopunder()
I'm developing Firefox add-on which has some content scripts to save data to IndexedDB. Same code works perfectly fine in Chrome extension, but not in Firefox extension. On Firefox everything works fine until part where data has to be written to database.
index.js
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
var { indexedDB } = require('sdk/indexed-db');
var request = indexedDB.open("myDatabase");
request.onerror = function(event) {
console.log("Failure.");
};
request.onsuccess = function(event) {
console.log("Success.");
};
pageMod.PageMod({
include: "*",
contentScriptWhen: "start",
//contentScriptFile: ["./js/jquery.min.js", "./js/jquery-ui.min.js", "./js/Dexie.min.js", "./js/content-script.js"]
contentScriptFile: [data.url("js/jquery.min.js"), data.url("js/content-script.js"), data.url("js/jquery-ui.min.js"), data.url("js/Dexie.min.js")],
contentStyleFile: [data.url("css/jquery-ui.min.css")]
});
content-script.js // part where it doesn't work in Firefox
function transition(location, time, date) {
var db = new Dexie("myDatabase");
db.version(1).stores({
likes: 'url, date, time'
});
db.open();
db.likes.add({url: location, date: date, time: time}).then (function(){
alert("Informations are added.");
}).catch( function(error) {
alert("There's an error: " + error);
});
}
I checked in Storage Inspector too, nothing is added to database. One more detail: I think that problem may be caused by script loading because I defined at start of content-script.js to load everything when DOM is ready (maybe, but I'm not sure if it's caused by that, I tried "start" , "ready" and "end" in contentScriptWhen parameter).
document.addEventListener("DOMContentLoaded", function(event) {
Everything in content-script.js is inside this event listener.
Dexie will by default use the indexedDB from window or self. In a firefox add-ons are not running in a window so probably Dexie doesn't find it. In Dexie v1.3.6, the indexedDB API can be provided in the constructor.
Try the latest Dexie v1.3.6 and do:
var idb = require('sdk/indexed-db');
var db = new Dexie("myDatabase", {
indexedDB: idb.indexedDB,
IDBKeyRange: idb.IDBKeyRange
});
I am new to Firefox addon development.
I need a way to call a contentscript function from main.js in firefox addon.
I have injected contentscript xyz.js on every opening webpage.
I want to call function abc() present in my contentscript xyz.js from my main.js on click of a button which i have place in navigation toolbar.
Below is my code.
Main.js
..
function addToolbarButton() {
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
if (!navBar) {
return;
}
var btn = document.createElement('toolbarbutton');
btn.setAttribute('id', 'mybutton-id');
btn.setAttribute('type', 'button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', data.url('icon_16.png'));
btn.setAttribute('orient', 'vertical');
btn.setAttribute('label', 'Test');
btn.addEventListener('click', function() {
tabs.activeTab.attach({
//
abc() //here i want to call the function present in my contentscript
//
});
}, false)
navBar.appendChild(btn);
}
..
xyz.js
..
function abc(){
//here is my code logic
}
..
I came to know that message passing is way to do so but unable to implement in firefox.
Please help me i have got stuckd.
You cannot call the function directly, you need to send a message to the content script. Meaning something like that:
var worker = tabs.activeTab.attach({
...
});
// Some time later
worker.postMessage("doABC");
And in the content script:
self.on("message", function(message) {
if (message == "doABC")
abc();
});
For more information on communicating with content scripts see documentation.
According to documentation it should work this way;
However I have similar question Accessing pre-loaded content script from ActionButton not yet resolved.
// main.js
function handleClick(state) {
var myWorker = tabs.activeTab.attach({
});
myWorker.port.emit("initialize", "Message from the add-on");
}
// content.js
/*BEGIN Listen events coming from Add-on script*/
self.port.on("initialize", function () {
alert('self.port.on("initialize")');
return;
});
I'm developing a chrome extension and i've met a very strange bug - my code works well on Mac OS, but doesn't work on Windows and Linux versions of Chrome. Versions are the same.
function captureAllScreen() {
chrome.windows.getCurrent(function(w) {
chrome.tabs.captureVisibleTab(w.id, {"format":"png"}, function(response) {
var image = response;
var url;
chrome.tabs.getSelected(w.id, function(response) {
url = response.url;
});
var viewTabUrl = [chrome.extension.getURL('app.html'),
'?id=', id++].join('');
chrome.tabs.create({url: viewTabUrl}, function(tab) {
var targetId = tab.id;
var addSnapshotImageToTab = function(tabId, changedProps, tab) {
if (tabId != targetId || changedProps.status != "complete") {
return;
};
chrome.tabs.onUpdated.removeListener(addSnapshotImageToTab);
var views = chrome.extension.getViews();
for (var i = 0; i < views.length; i++) {
var view = views[i];
if (view.location.href == viewTabUrl) {
view.twm_Draw.sendScreen(image, url); //Application-specific method
break;
}
}
window.close();
};
chrome.tabs.onUpdated.addListener(addSnapshotImageToTab);
});
});
});
};
Update:
What i want to do with this code - is to take a screenshot and tab url and send it to my extension's page. When user clicks on my extension's icon - it opens a popup with two buttons, one of it fires this function.
In Mac Os everything works - this code takes a screenshot, tab url, opens new tab with my application and sends the data there. On Linux & Windows versions of chrome it doesn't send the data, after clicking the icon in the popup you just get a blank tab opened.
I think this part might be causing problems:
var url;
chrome.tabs.getSelected(w.id, function(response) {
url = response.url;
});
//using url
The rest of the code should be wrapped into callback function, otherwise order of execution is not guaranteed.
I'm guess it's only supported on Mac, whatever it does:
view.twm_Draw.sendScreen(image, url); //Application-specific method
I don't know about Unix but on Windows you can only get a screenshot using a NPAPI plugin like the Google extension for screen capture.