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
Related
I currently have a button. When it's clicked I execute a javascript code.
var openAppBtn = document.getElementById("openAppBtn");
openAppBtn.onclick = function () {
var app = {
launchApp: function () {
window.location.replace("testappscheme://")
}
};
app.launchApp();
};
<a id="openAppBtn" class="btn" href="">Open KWCP App</a>
when I execute this bit of code on iOS, the page does a refresh if the app is not installed. May I ask how do I attempt to open the app without the page redirecting.
You could use an iframe to trigger the app intent. Example code for triggering the intent on the page-load for example. Just put it inside your click function.
<script type="text/javascript" charset="utf-8">
var frame = document.createElement('iframe');
frame.src = 'testappscheme:/' + window.location.pathname + window.location.search;
frame.style.display = 'none';
document.body.appendChild(frame);
// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
</script>
Simply by clicking the button, add an iframe to your page with the schema-url.
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 am new to pdf.js and google chrome extensions. I am using pdf.js to view PDF files in Chrome (https://github.com/mozilla/pdf.js/tree/master/extensions/chromium).
WHAT I WANT TO IMPLEMENT: Once my PDF is loaded and processed by PDF viewer (pdf.js), I want to check if a user is logged into my website via XmlHttpRequest. Then I want to create a popup window showing the user's name or ask him/her to login.
I've added checkLogin(); function to the following script (https://github.com/Rob--W/chrome-api/tree/master/chrome.tabs.executeScriptInFrame).
checkLogin(); opens a new popup window (dialog.html)
chrome.tabs.executeScriptInFrame.js :
function checkLogin() {
chrome.tabs.create({
url: chrome.extension.getURL('dialog.html'),
active: false
}, function(tab) {
// After the tab has been created, open a window to inject the tab
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true,
height: 200, width:500
});
});
}
dialog.html displays the message returned from dialog.js (containing username or asking user to login)
dialog.html :
<html>
<head><title>Dialog test</title></head>
<body>
<div id="output"></div>
<script src="dialog.js"></script>
</body>
</html>
dialog.js :
connect();
function connect() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "sendingcookies.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status ==200 ) {
var response = xhr.responseText;
document.getElementById('output').innerHTML = response;
}
}
xhr.send(null);
}
THE PROBLEM: If I insert checkLogin(); function in background.js, the script runs when the extension is loaded. However, I want to run this function each time a PDF is loaded and processed by pdf.js. I am not sure how to proceed as I'm still familiarizing with pdf.js code.
Any tips on how to implement this correctly will be awesome. Thanks in advance for your help!
So I figured out how to implement this. I'm posting this answer for those that may be interested.
As suggested by user #Luc on the thread How to know if PDF.JS has finished rendering? , I added my checkLogin(); function to this existing function in viewer.js.
document.addEventListener('textlayerrendered', function (e) {
var pageIndex = e.detail.pageNumber - 1;
var pageView = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
//Added this code - creates popup window once PDF has finished rendering
if (event.detail.pageNumber === PDFViewerApplication.page) {
checkLogin();
function checkLogin() {
chrome.tabs.create({
url: chrome.extension.getURL('dialog.html'),
active: false
}, function(tab) {
// After the tab has been created, open a window to inject the tab
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true,
// incognito, top, left, ...
height: 300, width:500
});
});
}
}
}, true);
As a result, my popup window loads while/once the PDF has finished rendering. It's pretty neat!
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;
});
function CallPrint() {
var prtContent = document.getElementById('<%= pnlDelete.ClientID %>');
var winPrint = window.open('', '', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
winPrint.document.write("<h3>Summary</h3><br />" + prtContent.innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
I have a need where I have to print contents of a div. I am using above code to do so. It is working fine in IE but does nothing in Firefox. Am I missing something here that needs to be done in Firefox?
Instead of opening a new window without any URL, I opened this page in the window and accessed the contents of the pnlSummary from the opened window via window.opener object –
function CallPrint() {
var winPrint = window.open('Print.aspx', '', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
}
On Print.aspx page I used this function –
function Print() {
var prtContent = "<h3>Summary</h3>" + window.opener.document.getElementById('ctl00_cphContent_pnlSummary').innerHTML;
document.getElementById("printDiv").innerHTML = prtContent;
window.print();
window.opener.focus();
window.close(); }
and called it on body onload.
<body onload="Print();">
<form id="form1" runat="server">
<div id="printDiv">
</div>
</form>
</body>
This is working fine in both IE and Firefox.
Use setTimeout() function for loading the page. The example is given bellow link.
http://oraclehappy2help.blogspot.in/2012/09/child-window-printing-problem-solution.html
Uhm... your code seems to work fine for me, on Firefox 3.5 (Windows).
It's possible that are something wrong on your pnlDelete.ClientID?
Your javascript code is rendered well on the page?
Anyway I suggest you to use jQuery + a print plugin like this.
Check to ensure your panel has something. My guess is prtContent is undefined
Try this:
function CallPrint() {
var prtContent = document.getElementById('<%= pnlDelete.ClientID %>');
if (prtContent) {
var winPrint = window.open('', '', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
winPrint.document.write("<h3>Summary</h3><br />" + prtContent.innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
else {
alert('No summary available for printing');
}
}
you can use JS Printer Setup https://addons.mozilla.org/en-us/firefox/addon/js-print-setup/"
which is Fire fox Depended addon most usefulladdon In web-app Kisok in Firefox to select printer
attached some example for attached printer and local printer it may help you to build without print dialog.
function EB_Print(printType) {
try{
var printerType = printType; // type of the Print Code : network
// Default Printer Configuring
var Default_printer = "Canon MG2500 series";
/** local Printer configuring via Network
** Config teh Local server use \\\\ to get \\
**/
var Organizer_Printer = "\\\\network\\Canon LBP2900";
jsPrintSetup.setPrinter(Default_printer);
jsPrintSetup.setSilentPrint(true);// withoud dialog
/** alert(jsPrintSetup.getPrintersList()); // Debugger for the attached Printers list
alert(jsPrintSetup.getPrinter()); // get the set printer Option
**/
// id network is selected It will print the page in network
if(printerType == 'network'){
jsPrintSetup.setPrinter(Organizer_Printer);
}
jsPrintSetup.print(); // Print the page
}catch (e) {
// TODO: handle exception
}
}
you could try a jquery plugin...
http://plugins.jquery.com/project/PrintArea