I'm trying to output some very detailed summary information about the properties of nodes in the DOM tree. Several years ago, I wrote a browser extension that created a new window and wrote the output there; that extension is no longer compatible with modern versions of Firefox, so I'm trying to port it into a Greasemonkey script instead of writing a whole new extension. Unfortunately, the cross-origin scripting policy seems to prevent me from actually writing anything to the window I've created. I have two questions:
1. Is there a better way to output too much text for an alert box, so that some or all can be copied, without modifying the original page's DOM tree?
2. If not, how do I create a window and output text to it from a Greasemonkey script?
I'm running the current version of Greasemonkey, by the way.
Is there a better way to output too much text for an alert box, so that some or all can be copied, without modifying the original page's DOM tree?
You can use shadow DOM to create a popup box that is isolated from the original CSS & JS.
If not, how do I create a window and output text to it from a Greasemonkey script?
AFA user-scripts, a new window is a new page. It will be a lot more work if you need to pass data to that window from a user-script. Therefore option 1 would be recommended.
Related
I would like to run some userscripts to backup data.
The same scripts could be used on a variety of websites.
Scripts are basically the same, only some configuration changes from one script to another (what to scrape on the page, and where to save it).
Scripts will not alter the page in any way, just read it then call some REST API with the data
I do not want these scripts to be loaded on every web page, as they won't alter them, and depending on the page there is only one I'd like to run anyway.
So is there a way to launch these scripts directly from the browser (Firefox) ? From a bookmark or something ? Basically I want to click a button and have the script run like if I was running it from the js console.
Best I found for now is the "#run-at context-menu" directive of Tampermonkey. My script appears in a TamperMonkey context menu and is run on click.
However this menu is loaded on every page (#run-at context-menu ignores the #include directive and is applied everywhere), I'm not sure of the performance consequences, and it might be inconvenient if I end up with lots of scripts.
I guess I could also modify my scripts to be run on specific pages so that they add a floating button or something. But I'd rather not modify the pages, and it would be inconvenient on pages where I'd like to have several possible scripts.
I remember using a Greasemonkey script that added options on the context menu a long while ago. Would that be possible with Tampermonkey, implementing an equivalent of the #run-at context-menu myself that would only work on some pages ?
A more native way would be best, but I'm open to options.
Basically I want to click a button and have the script run like if I was running it from the js console.
From above, I assume the userscript does not use any GM API or use #require since those are not available in JS console.
If that is the case, FireMonkey has a feature to inject script (or CSS) from the toolbar popup.
After saving a script and disabling it (so it doesn't run automatically) or enabling on sites that the script MUST run, users can select the script in the toolbar icon popup and click the button to inject the script in the active tab.
For temporary scripts, FireMonkey also has a Scratchpad that you can paste JS (or CSS) into and run on any webpage by clicking the button. FireMonkey remembers the last pasted data so that it can be reused.
Note: Except TM that alters the CSP of websites, other managers are bound by the webpage CSP.
Turns out there's a function for that: https://wiki.greasespot.net/GM.registerMenuCommand
Your script just needs to declare a function, call GM.registerMenuCommand("label", your_function), and it becomes available on click in the GM/TM menu.
Contrary to the other answer this means you can use #require.
Contrary to the #run-at context-menu this means you can use #match to only apply it to the intended websites
Notes:
GM_registerMenuCommand in TamperMonkey
Needs the #grant to use the function
I have created two CKEditor plugins. Each of them uses an "Iframe Dialog Field", meaning that a dialog box is launched and the contents of that dialog box is a webpage (you can think of the entire dialog box as being like one big iframe).
Each plugin works perfectly on its own. However if I use both plugins in the same CKEditor app, they both end up displaying the same page, rather than two different pages, despite the fact that they point to two different pages. I see no reason why this should be happening. Does anyone know how to prevent this?
To make sure there is no confusion, an "IFrame Dialog Field" is a dialog box whose contents are another webpage.
Documenentation - http://ckeditor.com/addon/iframedialog
[ This is different from using an "IFrame dialog", which I believe is a plugin that lets the user add an iframe to the page.
Documentation - IFrame Dialog: http://ckeditor.com/addon/iframe ]
In terms of usage, when using an IFrame Dialog Field, you specify the url of the page to load in the addIframe() command. Here is an example of using a CKEditor Iframe dialog
https://gist.github.com/garryyao/1170303
Back to my issue - if I use just one of the plugins in my CKEditor, it works perfectly. Each plugin points at a different url, and opens that url as the contents of the dialog box. But, if I use both plugins in my CKEditor, although I see a different icon for each, both end up launching a dialog box which points to the same url. Depending which one I launch first, that is the url both end up opening. It is as if you are only allowed to use one IFrame Dialog Field in CKEditor, and the first one used overwrites all others.
This same question was asked a couple of years ago, with no response on the CKEditor forum. The person who asked the question posted his solution, or rather his workaround, which was to NOT use the IFrame Dialog Field altogether, but to instead use a regular dialog and then put an iframe element within it.
http://ckeditor.com/forums/CKEditor-3.x/multiple-iframedialog-plugins-display-same-dialog
That seems like an OK workaround, but it is a workaround and not a solution. I haven't tried it yet, and don't know what potential issues I will run into if I go down that route. I'd prefer to fix my existing code rather than rewrite the plugins, unless I have no choice.
Any help would be appreciated.
Since I have not found any further information, or received any answers here, I ended up going with the workaround mentioned at the end of my question - I used a regular dialogue box and put a big Iframe within it. This problem doesn't exist with that approach, and It looks pretty much the same as an Iframe dialog box. (Considering the almost total lack of community support with CKEditor customization, I've realized it is better to just adjust your design/concept to do what is more easily accomplished with CKEditor, rather than get CKeditor to do exactly what you want).
I am using CKEditor to get HTML from the user. The user will use HTML tags and it will be saved in the database. I need a functionality for the user to see how the page will be displayed when open as .html before saving in the database.
Is it possible to do that using CKEditor and if yes.....then how?
Thanks-in-Advance
It's certainly possible, but depends a lot on your specific requirements.
Get the contents of the editor using editor.getData(), then open a pop up window displaying that content - this should be relatively simple with JavaScript so I won't give any examples - you'll have to try it yourself first :). If a pop up is not something you want to use, maybe use an inline dialog, such as the ones that jQuery uses.
I would create the workflow so that the preview box has a save button inside it, forcing the user to preview before saving. If that's not acceptable, then create a separate button on your page to do the preview.
Is there a way to download dynamically created Flash (SWF) files? I'd like to fetch them and convert to PNG. (This can be done for example with swfrender.)
For example, when pointing my webbrowser to http://flashserver.company.com/statsgraph.jsp?data=2012-04 (URL completely made up), a JSP script on that server creates a statistics graph. But this is done on-the-fly, so there's no SWF file that I could download (for example with wget).
I could take a screen shot from what my browser displays, but I prefer to do this automatically with a server-side (shell or PHP) script, because it's about a few dozen graphs to be downloaded, once per month. BWT, what I intend to do is fully legal. :-)
It's unlikely and overly complicated to render SWFs server side. The SWF probably holds no data itself, anyway, it probably just displays it.
You need to use Firebug or something similar to dig up the SWFs data source and save that data set instead of the SWF. Then, you can create your own image graph from that data set, using jpGraph or something similar.
The Situation
I need to automate the copying of a HTML link to the current page that
is viewed in the current Firefox Tab into other WYSIWYG editors. This
is not the same as copying just the plain-text of the URL, nor is it
the same as pasting just the plain-text of the web pages title. This
is also not the same thing as navigating to some other web page that
has the HTML link to the page of interest, selecting the text with the
mouse cursor, and typing CTRL-C to copy it into the current operating
systems clipboard (both Linux and Windows, should not make any
difference). Only the update to the clipboard is to be automated; the
pasting from the clipboard into the target application will be done
manually.
The desired use case is as follows:
The user browses to any web page from within Firefox.
The user types some user-specified key sequence that is not
in conflict with standard Firefox built-in key bindings.
Firefox will then do only part of what Copy Link Bookmarklet
does: Instead of opening up a new separate window/tab and
constructing and rendering the HTML for the link, and then
requiring the user to waste motion in selecting and copying the
link into the clipboard, the extension will then format the HTML
itself and copy that into the clipboard directly.
The user then selects any of the targets described below and
types CTRL-V to paste the formatted text.
The user then sees the link as a link in that target area, and does
not see anything literal like http://...
For example, if the webpage browsed to was http://www.google.com, and
the user clicked the user-defined key sequence, and if the user pasted
it into some Google Document, what they would see in that document is
not http://www.google.com nor would they see Google, but instead
would see what you would see when you read this in StackOverflow in a
web browser: Google
Now, there are Firefox extensions and bookmarklets that come close,
but they all involve no net reduction in mouse motion and/or key press
overhead, which is the most time-wasting aspect of this frequently
occuring use case. My searches for an existing extension turned
up nothing that exactly meets my needs (see Research section
below). Therefore, I think I may need to roll my own extension (or
modify an existing one), unless someone can point me to an existing
extension that provides this functionality.
The extension I have in mind should work in Firefox version 11 or
greater running on either Linux or any version of Windows. Only
Firefox and a suitable Firefox extension should be needed, and not any
other special software.
Targets of the paste should be:
GMail compose text areas
Google Documents
Microsoft Word documents
Microsoft Outlook compose text areas.
Any other WYSIWYG editor such as the Blogger post editor.
Notepad (in which case it is the web page title that is pasted only
and not the URL, or both the web page title and URL as separate
plaintext; either way).
About user-specified key bindings: If there was an extension already
that did the above but without providing the ability to bind a
keybinding to it, then I would expect to be able to use the keyconfig
extension extension to handle that aspect. Actually, that might
even be preferable; I don't know yet.
Research
Below are approaches I investigated that came close to what I want,
but did not exactly meet the need:
Hacking on Copy Link Bookmarklet won't work because, from what I can tell, there is no way to update the OS's clipboard from a bookmarklet, hence why I think that a Firefox extension is required.
In a Firefox extension, how can I copy rich text / links to the clipboard?
3 FireFox Addons to Easier Copy Links and Anchor Texts -- None of the extensions listed do what I want because they force you to use the right mouse button and navigate down one or two levels of context menu, which is wasted motion.
Copy Link Text (CoLT) -- CoLT also supports copying a hyperlink and it’s associated text as a rich-text formatted link, however it does not include a default keybinding. It looks like someone else is attempting to tie keyconfig to CoLT, which might be an option as a solution.
Copy URL Plus -- Looks like it has the copy-to-clipboard logic, but doesn't look like it has been maintained since Firefox 1.x timeframe.
I am answering my own question:
The CTRL-SHIFT-F11 binding will silently stop working if both keysnail and keyconfig are installed into the same Firefox browser. The fix for me was to simply uninstall keysnail as I don't use it.
I did not actually need to write my own Firefox extension, but I did
need to scrape out a bit of code that copies the richtext link from
the Copy Link Text (CoLT) extension and apply it directly as a
binding into the keyconfig extension as follows:
Install the keyconfig extension.
Restart Firefox.
After Firefox loads up, type CTRL-SHIFT-F12 to bring up the keyconfig configuration menu.
On the bottom of the page, click on the Add a new key button.
In the Name field, type in some suitable name such as Copy Rich Text Link to Current Page.
Type in the following chunk of Javascript code (This code I carved
out of the objCoLT.CopyBoth function inside the content/colt.js
file inside the Copy Link Text (CoLT) extension):
var url = content.document.location.href;
var text = content.document.title;
// Use the users selection instead of the title if text is selected:
var selection = document.commandDispatcher.focusedWindow.getSelection().toString();
if (selection != "")
{
text = selection;
}
var richText = "" + text + "";
var xfer = Components.classes["#mozilla.org/widget/transferable;1"].createInstance(Components.interfaces.nsITransferable);
xfer.addDataFlavor("text/html");
var htmlString = Components.classes["#mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
htmlString.data = richText;
xfer.setTransferData("text/html", htmlString, richText.length * 2);
var clipboard = Components.classes["#mozilla.org/widget/clipboard;1"].getService(Components.interfaces.nsIClipboard);
clipboard.setData(xfer, null, Components.interfaces.nsIClipboard.kGlobalClipboard);
Click Ok.
Back in the main Keyconfig dialog, <disabled> should be shown in the text field to the left of the Apply button.
Click in that text field, and type the keybinding you want to associate with it, such as CTRL-SHIFT-F11.
Click the Apply button.
Click the Close button to close the Keyconfig configuration dialog box.
To test this out, proceed as follows:
In Firefox, navigate to some arbitrary page.
Type in CTRL-SHIFT-F11 (or whatever keybinding you chose above).
Notice that no dialog boxes popup; that is intentional.
Open up Google Documents, and Create a new document.
Click in the new document, and type CTRL-V.
You should see the HTML/rich-text form of the link pasted in.
Click on the link and then click on the URL to the left of Change.
The browser should open up the original page corresponding to that URL.
I have been able to copy URL as HTML with the following bookmark:
javascript: navigator.clipboard.write([new ClipboardItem({ ["text/html"]: new Blob([`${document.title}`], { type: "text/html" }) })]);
Unfortunately in firefox the Clipboard write API still requires to set thedom.events.asyncClipboard.clipboardItem to true in about:config.
Several extensions exist that offer copying of title and URL but few seem to support Rich Text creation. The key is that the copied text needs to be formatted in html with a href and it needs to be copied as a text/html type.
The extension I went with in the end is CopyTabTitleUrl. (GitHub) It supports both requirements and also has a keybind feature along with a toolbar button that can also function as a single-click copy.
Set the Format option to:
${title}
Then Activate Extended Mode and make sure to check the "Copy in text/html format" option in Other. After that, using the format copy, the result can be correctly pasted into Office applications. And Stack Exchange evidently as the links above were created by the add-on.
Note that the Edge implementation of URL copying seems to be somewhat different still. With a default plaintext paste, Edge will just paste in the URL while this approach will of course paste unformatted HTML. But it's close enough.