I am creating Firefox addons that works like search in chrome. How can i use browser.tabs.create() function with 'url' option?
I have read this article. But In here, there is no documentation of How to use this tab creation with variable url.
//code for CMcontentScript.js-start
var tabs = require("../sdk/tabs");
self.on("click", function(node, data) {
textContent = window.getSelection().toString();
var searchURL = google.com?searchtid=" + textContent;
tabs.open(searchURL);//In here i want to know how we can add variable url to 'url' option
});
//code for CMcontentScript.js-ends
//code for index.js-start
searchMenu = cm.Item({
label: "Search With enadoc",
data: setURL,
context: cm.SelectionContext(),
image: self.data.url("./icon-16.png"),
contentScriptFile: "./CMcontentScript.js"
});
//code for index.js-ends
I think you are creating a JPM addon. Which is an SDK addon. This is not a WebExtension. And the chrome.browser.tabs.create is a webextension api.
To create a new tab you should do this:
var tabs = require("sdk/tabs");
self.on("click", function(node, data) {
var textContent = window.getSelection().toString();
var searchURL = 'http://www.google.com?searchtid=' + textContent;
tabs.open(searchURL);
});
Related
I am currently implementing a pdf export functionality within a wordpress plugin i'm developing but the pdf file generated when i click on export button is empty. To implement the export i use FPDF library
Ive put the code which uses FPDF in a function which is executed by the wp_ajax_ action hook. Here is the code:
<?php
require_once plugin_dir_path( __FILE__ ) . 'fpdf/fpdf.php';
function pdf_pull_wpse_212972() {
$pdf = new FPDF('p','mm','a4');
$pdf->SetFont('arial','b',14);
$pdf->AddPage();
$pdf->Cell(40,10,'Referrer URL',1,0,'C');
$pdf->Cell(40,10,'User IP Address',1,0,'C');
$pdf->Cell(40,10,'User Agent',1,0,'C');
$pdf->Cell(40,10,'Browser',1,0,'C');
$pdf->Cell(40,10,'OS',1,0,'C');
$pdf->Output();
wp_die();
}
add_action('wp_ajax_pdf_pull','pdf_pull_wpse_212972');
Here is the jQuery code executed when i click on the export button
jQuery(document).ready(function($) {
jQuery('#pdf-export-btn').click(function(){
var data = {
'action': 'pdf_pull',
};
jQuery.post(tclisecure.ajax_url, data, function(response) {
var downloadLink = document.createElement("a");
var fileData = [response];
var blobObject = new Blob(fileData,{
type: "application/pdf"
});
var url = URL.createObjectURL(blobObject);
downloadLink.href = url;
downloadLink.download = "tracked_info.pdf";
/*
* Actually download PDF
*/
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});
});
});
I'm using the raw property to get formatted data from urls into the terminal, like this
$(function() {
var save_state = [];
var terminal = $('#term').terminal(function(command, term) {
term.pause();
url = ...;
$.get(url, function(result) {
term.echo(result, {raw:true}).resume();
});
}, { prompt: '>>', name: 'test', outputLimit: 1000 });
});
I'm wondering, how do I get it so when links in result are clicked, they load their data into the terminal the same way command data is loaded, rather than opening a new browser tab?
Thanks!
If you're using command that include URL or URI (for instance get foo.html or get https://example.com) you can use this:
terminal.on('click', '.terminal-output > div:not(.exception) a', function() {
// if you don't use `true` it will show the command like if you type it
// instead of `get` you can use any command you have that will
// fetch the url and display it on the terminal
terminal.exec('get ' + $(this).attr('href'), true);
return false; // prevent following the link
});
if you have different logic for displaying the urls you may need to dipicate the code from interpreter inside click event handler.
terminal.on('click', '.terminal-output > div:not(.exception) a', function() {
// duplicated code from your interpreter
term.pause();
var url = $(this).attr('href');
$.get(url, function(result) {
term.echo(result, {raw:true}).resume();
});
return false;
});
I have been trying to implement the answer to this question but keep getting the error "selected.getImage is not a function".
I have tried multiple different code examples at this point and I'm stumped. It seems like this is a type error, but I'm not sure where I can correct this.
I am looking to select a single image and return the path to that image in order to upload to the server. I don't need to display it on the device, though that is an option I suppose. Seems easy enough, but apparently I'm missing something.
I'm using v. 6.0.1 or the imagepicker plugin. I'd quote the code, but at this point I am using the exact example provided by Shiva Prasad in the above question.
Adding code per Max Vollmer:
var context = imagepickerModule.create({
mode: "single" // allow choosing single image
});
context
.authorize()
.then(function () {
return context.present();
})
.then(function (selection) {
console.log("Selection done:");
setTimeout(() => {
selection.forEach(function (selected) {
selected.getImage().then((source) => {
console.log(selected.fileUri); // this is the uri you need
});
});
}, 1000);
}).catch(function (e) {
console.log(e);
});
I was facing the exact same error yesterday.
I use the fromAsset function directly on the "selected" because apparently with the new version of this plugin, "selected" is an Asset. So you got an imageSource and you can use the "saveToFile" function that will copy the Asset into a new location (get this location using fileSystemModule from TNS). Use the path of this new location for your UI, and the image will appear. You can also create a file object from this location fileSystemModule.File.fromPath(path);, I use for upload.
context
.authorize()
.then(function () {
return context.present();
})
.then(function (selection) {
selection.forEach(function (selected) {
let file;
if (selected._android) {
file = fileSystemModule.File.fromPath(selected._android);
//viewModel.uploadFile(file);
}else{
imageSourceModule.fromAsset(selected).then((imageSource) => {
const folder = fileSystemModule.knownFolders.documents().path;
const fileName = "Photo.png";
const path = fileSystemModule.path.join(folder, fileName);
const saved = imageSource.saveToFile(path, "png");
if (saved) {
console.log("Image saved successfully!");
file = fileSystemModule.File.fromPath(path);
//viewModel.uploadFile(file);
}else{
console.log("Error! - image couldnt save.");
}
});
}
});
}).catch(function (e) {
console.log(e);
// process error
});
Explanation
The uncommented snippet (//viewModel.uploadFile(file);), viewModel reference (will be different on your app) and the function: uploadFile for example is where you would pass the file to upload it or set it to the image.src etc
Make sure to declare imageSourceModule at the top.
const imageSourceModule = require("tns-core-modules/image-source");
I'm creating a Firefox addon using jetpack (jpm with node.js) to extend the Firefox developer tools to allow editing the current page's html. (I know this feature already exists; just trying to learn the ropes).
What API do I use to access the current page's HTML? I see that there is a Debugger.Source but I'm not sure if this is correct. If so, how do I retrieve this data?
As the first answer suggests, you can get at the html source using a content script injected the page. For example, here's a very simple approach that uses the tabs module to attach a content script into the current page:
const self = require('sdk/self');
const tabs = require('sdk/tabs');
let { ActionButton } = require("sdk/ui/button/action");
let button = ActionButton({
id: "my-button-id",
label: "Get HTML Source",
icon: {
"16": "chrome://mozapps/skin/extensions/extensionGeneric.png",
"32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
},
onClick: (state) => {
let worker = tabs.activeTab.attach({
contentScript: 'self.port.emit("htmlSrc", {head: document.head.outerHTML, body: document.body.outerHTML});'
});
worker.port.on('htmlSrc', (result) => {
worker.destroy(); // clean up
let src = "<html>\n"+ result.head + "\n" + result.body + "\n</html>";
require('sdk/clipboard').set(src, 'text');
});
}
});
Direct access via SDK is impossible, but you can use content scripts to read and modify the page.
I'm making a Firefox Browser Add-on and need to find the url of the current tab
I've tried this post Opening a URL in current tab/window from a Firefox Extension but it tells me that 'window' is not defined. (I think because I am making an add-on rather than an extension.)
Here's what I've tried to do:
var widgets = require('widget');
var tabs = require('tabs');
var widget1 = widgets.Widget({
id: "widget1",
label: "widget1",
contentURL: "http://www.mozilla.org/favicon",
onClick: function() {
console.log(tabs.url);
}
})
I've made a widget such that when I click it the url of the current tab should be 'console.log'ed.
Doesn't seem to happen! Keep getting "info: undefined" which clearly means that tabs.url isn't returning anything. But this seems to be the way to use it according to https://addons.mozilla.org/en-US/developers/docs/sdk/1.5/packages/addon-kit/docs/tabs.html
Anyone have any ideas?
Thanks,
Will
You're almost there:
const { ActionButton } = require("sdk/ui/button/action");
const clipboard = require("sdk/clipboard");
const tabs = require('sdk/tabs');
let button = ActionButton({
id: "my-button-id",
label: "Button Label",
icon: {
"32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
},
onClick: function(state) {
let url = tabs.activeTab.url;
console.log("active tab url:", url);
require("sdk/notifications").notify({
title: "Active Tab's Url is "+url,
text: "Click to copy.",
onClick: function() {
clipboard.set(url);
}
});
}
});
You should check out the documentation on the tabs module.
Note: I've updated this code example to use the new ui modules available since Firefox 29 - the 'widget' module used in the original question was valid at the time but has since been deprecated and then removed.