Get DOM values in browser extension - javascript

I want to read a value of DOM element. I am new to browser extensions. I came across codes which provided help in executing a code in browser context but how do I fetch a value and use in extension's context?
var value = document.getElementById('id1'); // Here document should be of browser context.

Try
var value = document.getElementById('id1').value;
// note the extra .value.
You have to access the DOM from content scripts.

If you are looking to get the currently active tab, you would do this: https://developer.chrome.com/extensions/activeTab
How this will work will depend on whether you are in browser context, content scripts or background though.
I highly recommend reading the chrome extension guides: https://developer.chrome.com/extensions/getstarted. They help quite a bit, and the different scopes of the chrome extension are crucial to understand to successfully develop on it.

Related

Calling Firefox's :screenshot helper function in the Browser Console with JavaScript

I am trying to write a small script to copy in the web console of a live page, and part of what this script needs to do is take several screenshots of the document body. This script will be for personal use, for a very specific task, so I think it would not be a problem to use Firefox's built in helper function :screenshot, instead of a more cross-compatible solution.
I have read this question about the same topic, which explains why it is not possible to call such helper functions from the webpage's console in JavaScript. But what I thought I could do instead, is to use Firefox's browser console, which gives access to the entire browser. Again, I have been literaly just copying and pasting functions into the console to use while interacting with the page, so if I can call the :screenshot function programmatically from the browser console I would just need to figure out how to access the DOM of a particular document or tab and I will get the same result.
I have tried to import and use html2canvas, but it did not work most probably because the content that I am trying to screenshot resides inside a shadow-root. I know that one alternative is to write my own extension, but I would like to avoid such a job for this task. Eventually, do you know if it is possible to achieve similar results in a Chromium based browser (Brave)?
Thank you very much :D
The good news is that, yes, you can invoke the devtools screenshot functionality from the browser console. Conveniently the default selected node is the document body.
(async()=>{
const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
const { gDevTools } = require("devtools/client/framework/devtools");
const { TargetFactory } = require("devtools/client/framework/target");
const target = await TargetFactory.forTab(gBrowser.selectedTab);
const toolbox = await gDevTools.showToolbox(target, "inspector");
const inspector = toolbox.getPanel("inspector");
inspector.screenshotNode();
})()
Now the bad news. Accessing the DOM of content page from the browser console is unbearably tricky :(
You are going about solving the problem in the wrong manner. Firefox since version 57 has built in tools to provide what you want. To accomplish this you want to use Firefox's headless mode with Webdriver if needed.
The simple example from MDN is
/path/to/firefox -P my-profile -headless --screenshot https://developer.mozilla.org/

Check where/which line or document a script gets called

I'm having a JavaScript debugging question. I would like to know, how it would be possible to find out in which file/line a new script is loaded and called. My website has several scripts which are appended via document.write(), and I would like to find a way to find the function call in all attached scripts of the website.
I would prefer either Firebug or Chrome Dev tools.
Thanks!
Neither Firebug nor the Firefox or the Chrome DevTools currently allow to debug code inserted via document.write(). I created bug 1122222 for the Firefox DevTools and issue 449269 for the Chrome DevTools requesting to be able to debug such scripts. As upcoming Firebug versions will be based on the Firefox DevTools, it will offer this feature once the Firefox bug is fixed, so there's no need to create a separate issue for it.
Until the above bugs are fixed you need to use another method to inject your script in order to be able to debug it within the browser.
Method 1: using eval()
You can use the eval() function to evaluate arbitrary code dynamically. Note that the eval() only evaluates JavaScript code, it must not be surrounded by any HTML.
Example:
eval("console.log('Hi!')");
Method 2: injecting a <script> tag
You can add a <script> tag to the page and then add contents to it.
Example:
var script = document.createElement("script");
script.textContent = "console.log('Hi!');";
document.body.appendChild(script);
Method 3: using new Function()
You can create a new function via the Function constructor.
Example:
(new Function("console.log('Hi!');"))();
Note that JavaScript won't be executed using innerHTML or insertAdjacentHTML() due to security reasons.

Use content script to define global variables

I am creating a Firefox extension, and one feature of it that I would like is the ability for the user to inject a script or stylesheet into a specific website, rather like Greasemonkey (except that this will only be for one site). I am adding some functions for the scripts to make use of, which I intended to add from the Content Script into the main (unsafe) window. On the MDN blog, it says that they have made changes to how it should be implemented, so I have based my code on the new implementation as advised in the post, so this is what I have:
var $jq = jQuery.noConflict();//Yes, I am also injecting jQuery at the same time
console.log("created jquery object"); //This works
exportFunction($jq, unsafeWindow, {defineAs: "$jq"});
console.log("This will never be called");
But execution of the script just stops, and in the console it prints Message: TypeError: window is null.
I am testing in Firefox 28 predominantly (I can't seem to get Firefox for Ubuntu to update beyond that right now, and a whole load of issues are forcing me to use Ubuntu in a VM for this), but in Nightly 31a1 (Win7) nothing is ever injected, including a hardcoded style (that works on FF28) so I will have to figure that out at some point. (The PageMod code is here:
var lttWorker = sdk.pageMod.PageMod({
include:["*"],
/*contentScriptFile: [sdk.data.url("jquery.large.js"), sdk.data.url("scripts/bootstrapper.js")],
contentScriptWhen: "ready",*/ //This is commented to test whether it was an issue with the script. It's not.
contentStyle: "#header_bar{background-color:green;}", //This is injected in FF28 but not 31
attachTo: ["existing", "top"],
onAttach: function(){desktopNotifications({title:"attached content worker", text:"The content worker has been successfully attached"})} //This is called in FF28 but not 31
});
lttWorker.on("error", function(){callError("pageWorker failed");}); //This never gets called. Ever.
if anybody is interested)
EDIT: I have now tried it on Firefox 30b and there are still a load of issues, although they seem to be slightly different to both FF28 and 31...
First of all: These new functions are supported in Firefox 30 and later. See #canuckistani answer.
The exportFunction API is way too limited to actually inject something like jQuery with all the complex objects being or containing DOM nodes. That simply won't fly with the structured-clone algorithm that is applied to arguments.
The API is meant as a way for add-ons to communicate with pages bi-directionally, and not to inject complex libraries.
Your best bet is actually creating a script tag using the DOM APIs and putting jQuery there.

JavaScript objects visible in FireBug, inaccessible in code

In my code I have a line that dumps the current window (which happens to be a youtube video page):
Firebug.Console.log(myWindow);
It can be seen that window object contains "yt" property, which is another object that can be easily inspected in debugger:
http://i.imgur.com/lHHns.png
Unfortunately, calling
Firebug.Console.log(myWindow.yt);
logs "undefined" - why is that, and how can I access this "yt" property?
Edit: one addidtion that might be important: the code I'm writing is part of a firefox extension, so it's not really running inside a pgae, but in chrome - I'm starting to think that it may be the cause. Can chrome scripts be somehow limited in what they can see/acces as opposed to code in script tags?
For security reasons, Firefox extensions don't access web page objects directly but via a wrapper. This wrapper allows you to use all properties defined by the DOM objects but anything added by page JavaScript will be invisible. You can access the original object:
Firebug.Console.log(XPCNativeWrapper.wrappedJSObject.yt);
However, if you want to interact with the web page from an extension you should consider alternatives where the web page cannot play tricks on you (e.g. running unprivileged code in the content window: myWindow.location.href = "javascript:...").
Firefox and Chrome extensions can't access JavaScript within the page for security reasons.
I have seen confusion like this using asynchronous APIs.
console.log(obj); shows the contents of an object all filled in, but when accessing the object properties in code, they aren't really populated yet due to the call being asynchronous.
Why Chrome and Firefox shows them all filled in is probably just a timing issue as they probably process the console.log() asynchronously as well.

Accessing document's javascript variable from firefox extension

is it possible for Firefox extension (toolbar) to access document's variables? detailed explanation follows..
loaded document:
<script type="text/javascript">
var variableForExtension = 'something';
</script>
extension:
var win = window.top.getBrowser().selectedBrowser.contentWindow;
alert(win.variableForExtension); // undefined
it was first thing to try, and it's inaccessible this way because of security mechanisms (XPCNativeWrapper). i've read about accessing it trough wrappedJSObject and using events (adding listener to document and dispatching event from extension), but no luck. didn't try too hard, though. so, before i dig deeper ('events method' sounds like a way to go) i'd like to know is this even possible?
thanks
Yes, accessing a JS variable in content is and always was possible. Doing this the naive way wasn't safe (in the sense that a malicious web page could get chrome privileges) in older Firefox versions.
1) If you control the web page and want to pass information to the extension, you should indeed use the events technique. This worked and was/is safe in all Firefox versions.
2) If you want to read a value from the content document, you can just bypass the XPCNativeWrapper:
var win = window.top.getBrowser().selectedBrowser.contentWindow;
// By the way, this could just be
// var win = content;
// or
// var win = gBrowser.contentWindow;
alert(win.variableForExtension); // undefined
win.wrappedJSObject.variableForExtension // voila!
This was unsafe prior to Firefox 3. In Firefox 3 and later it is OK to use, you get another kind of wrapper (XPCSafeJSObjectWrapper), which looks the same as the object from the content page to your code, but ensures the content page won't be able to do anything malicious.
3) If you need to call a function in a content web page or run your own code in the page's context, it's more complicated. It was asked and answered elsewhere many times, but unfortunately never documented fully. Since this is unrelated to your question, I won't go into the details.
not so hard :)
in extension:
var jso=window.content.document.defaultView.wrappedJSObject;
now you can access any function or global variable in the webpage from the extension:
alert(jso.pagevar);
jso.pagefunction("hey");
If you are working with the new High-Level SDKs then accessing the variable via content scripts is a little different. You can't access the JavaScript objects directly from the add on code, but you can reach them from content scripts that have been attached to an open page via the unsafeWindow object. For example:
require("sdk/tabs").open({
url: 'http://www.example.com/some/page/',
onOpen: function(tab) {
var worker = tab.attach({
contentScript: 'unsafeWindow.variableForExtension = 1000;'
});
}
});
To read the variables you'll need to use the port methods on the worker variable as described in Mozilla's content script article.
Note that there are some security restrictions when dealing with objects and functions. See the articles for details.

Categories