I'm developing a Google Chrome Extension and I'm wondering what is the Chrome equivilant of window.content.document?
Looks like crome extensions depend on script injection if you want to interact with pages:
http://code.google.com/chrome/extensions/content_scripts.html
You can inject code or .js files.
For extension <-> DOM communication:
http://code.google.com/chrome/extensions/content_scripts.html#host-page-communication
To access windows: http://code.google.com/chrome/extensions/windows.html
Lets just say there's no direct access to DOM from Extension as far as I can see.
There is no window.content in Chrome right now (August 2014)
but window.document works just as well.
Like BGerrissen said, there is no direct access capability across different windows.
It is a restriction that different domain script cannot directly access each other.
As an extension, the main script itself is in a standalone chrome process.
You can put many functions, computations, preference code in this background.html.
And inject small portion of JS code into the content of other tab or window to manipulate the HTML content. And there communications to each other can be achieved by using postMessage and message handler.
Yes, BGerrissen it correct. You need to communicate with web pages via a shared DOM using content scripts.
It's quite tricky, requiring you to register events and listeners and bind data to a DOM element that both scripts can access.
http://code.google.com/chrome/extensions/content_scripts.html#host-page-communication
There's an example in Google Chrome labs where an extension script makes a web page red:
http://code.google.com/chrome/extensions/samples.html#ede3c47b7757245be42ec33fd5ca63df4b490066
Related
I am using Protractor to test Angular JS content of an application.
As part of my automation scripts, i have to launch a application url and then call browser extension .
On clicking the browser extension - i am getting this URL
"chrome-extension://glfffgjbfebdaehgdcaachlfcpkggbbc/html/options.html#"
I have tried some solutions stated on google forums like, but the extension from automation script is getting launched.
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/extension/getURL
Programmatically open a Chrome plugin's options.html page?
Due to security purposes, i am not sharing the code. I request someone to advise me on how to achieve this task. Thanks !
You can't. Browser extensions run isolated to the other components for security reasons. They can only access the webpage not the other way around. That is also very limited. The variables in console environment of a page cannot be accessed by the extension and so the other way around.
You can try web-accessible-resources if you own the extension otherwise not much you can do.
I am writing a Firefox add-on using the new SDK that does 5 very simple jobs. They are roughly related, so I would prefer a single add-on with a dropdown menu which I have implemented in a Panel.
I am working my way through the new SDK documentation, but can't find a direct solution. I find I can add a panel, but I cannot see how to manipulate the document in the current tab.
This is possible, isn't it? Using the global document doesn't work as presumably refers to the panel, or at least not to the document I am viewing.
So, how do I access the document from an add-on panel?
The short answer to your question is that you don't access web content from your main JavaScript code. You interact with the document (web content) in the browser's tab using Content Scripts. You can have the content script pass messages to your main script.
MDN summarizes the principals of using content scripts with the SDK as follows:
Content scripts can be one of the more confusing aspects of working
with the SDK, but you're very likely to have to use them. There are
five basic principles:
the add-on's main code, including "main.js" and other modules in "lib", can use the SDK high-level and low-level APIs, but
can't access web content directly
content scripts can't use the SDK's APIs (no access to globals exports, require) but can access web content
SDK APIs that use content scripts, like page-mod and tabs, provide functions that enable the add-on's main code to
load content scripts into web pages
content scripts can be loaded in as strings, but are more often stored as separate files under the add-on's "data" directory. jpm
doesn't make a "data" directory by default, so you must add it and put
your content scripts in there.
a message-passing API allows the main code and content scripts to communicate with each other
Exactly how you would do what you are wanting is unclear because you have not provided a clear description of what you are doing. However, it almost sounds like you could implement what you want using the context-menu. The context menu is one of the ways to attach a content script to the current tab and may provide you with the dropdown menu feel which you desired (although it is part of the context menu, not a dropdown menu).
I found the some strange <script/> tags on a site:
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/document_iterator.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/find_proxy.js"></script>
...
I haven't been able to find much information on this, but I highly doubt this is actually related to Google Chrome since this site in particular is still using <table>s for layout, and the source in question was retrieved with curl not a graphical web browser.
So,
What on earth is this?
What is chrome-extension://
Why is it using lifbcibllhkdhoafpjfnlhfpfgnpldfl as a directory name
Why is it pretending to be valid URL to a javascript file?
Why would I need find_proxy or document_iterator
Solved. As far as I know...
chrixian was right, It seems that only on this and a few select other pages, someone had re-saved them from Chrome's source-view with the Skype extension installed.
Thanks everyone for all your help, +1's for all! enjoy!
That is actually Skype Click to Call chrome extension.
Manage and view it using this link
chrome://extensions/?id=lifbcibllhkdhoafpjfnlhfpfgnpldfl
If you are using cURL to get the page, you're getting the HTML as it exists on the server--so I think a safe assumption would be: the author of the page initially saved the page from Chrome, he had an extension installed that inserted these script tages and lastly he didn't remove the script tags for one reason or another before putting the page on the server.
This is added by chrome as the page loads, to inject the extension's Javascript code into the page, so it can access the HTML document.
The Skype extension causes it by inserting all kinds of junk in webpages that you visit.
Do you have the Skype browser extension installed for Chrome?
Just disable the extension.
Chrome, like Firefox, provides developers with an easy API to extend the functionality of the web browser without needing to actually download and build the browser to do so.
They also provide a robust delivery system. In Google's case, it's the Google Chrome Web Store.
Extensions are installed locally on your computer, and use long strings as directory names to reduce the risk of collisions with another extension. In other words, if you and I both named our extensions "mycoolextension", then there would be a problem if a person tried to install your extension and my extension. The long string helps prevent collisions such as this.
The chrome-extension:// protocol is used by the browser to make requests to these local resources. Chrome extensions are developed using HTML5, JavaScript, and CSS, along with an API exposed to allow the local JavaScript to perform actions it would not normally be able to do on the Internet.
When you see these in the Chrome developer tools, it's just the extension doing it's thing, whatever that may be.
If you're seeing these, then you likely installed some extensions from the Chrome Web Store. To view them, go to the Tools menu and select "Extensions". This will show you a list of all installed Chrome extensions and apps.
To learn more about extension development, see the Getting Started Tutorial.
Also, as someone else mentioned, you're using the Skype Call Extension. However, an app using that directory name doesn't appear in the first page of the search results. It might be worth doing some more research to make sure you got that extension from a legitimate source, whether that be Skype or the Chrome Web Store.
If you're seeing it in Chrome developer tools for every request you make, it means it has access to all your websites, which could be benign, like if they're just making phone numbers clickable, or it could be malicious, if it's scraping your bank account info and shipping it off to some third party server. :)
It's a Chrome extension, and chrome-extension:// is a URL for extensions to address their contents via Javascript.
lifbcibllhkdhoafpjfnlhfpfgnpldfl is the unique identifier for the extension. I can't find it with a search, but apparently it might be Skype.
It's not pretending... it is a valid URL. The Javascript file is located in the extension. If you were to look on your harddrive you'd probably find that very file in the extensions folder.
The functions its calling probably are some sort of detection used by the extension to see if it needs to enable itself.
See this for some additional information:
Checking if user has a certain extension installed
I'm doing an extension now and i have one part of script which is static (will never change) and another part which is loaded from the website. And, i'm seeing 2 ways:
To load it with XMLHttpRequest and inject into web page
To put it as a <script src="example.com/myscript.js"></script> and have it load it itself
But, the second way probably won't have access to my extension API (to functions defined in extension files, i.e. in chrome://myext/script.js)
And, the first way will probably be unsecure because i will have to eval the code in a gBrowser.contentWindow.wrappedJSObject object which is a Window object for the loaded page
Any ideas?
Are you saying that you want the dynamic script to have chrome privileges? If so, why not load it using XMLHttpRequest, save it to disk and then import it as a JavaScript Module (https://developer.mozilla.org/en/JavaScript_code_modules/Using). Obviously there are security considerations since you are giving a script from the web pretty much unlimited privileged, but if you control the script's source then you are presumably okay. If you are really worried you can use HTTPS to download the script, which will protect against someone intercepting the traffic.
If you want the code to run with content privileges but have access to functions in your chrome JavaScript, then maybe you want to expose the chrome functions to content as described in this article: http://weblogs.mozillazine.org/weirdal/archives/017188.html
I'm writing an in-browser Chrome app that will allow users to edit HTML and JS code and then be able to test their changes live.
My current method of doing this is to create a new window with JavaScript, create an IFrame in that window, and then inject the user's HTML or JS code into the IFrame. The problem with this though, is that the page load events of the IFrame can't be used by the script being live-tested. My app could manually call testWindow.iframe.contentWindow.onload, but that wouldn't work with the various events and methods used by the different JS libraries for their "domready"-style events.
Perhaps this is not possible, and I'll just have to send the code to the server and have the server output it. I noticed apps like jsfiddle actually just ask what library and event you want.
Any ideas on how I can have live-testing in my app and still fire page loading events for the JS being tested?
You could use dispatchEvent on the iframe, which you know will be supported since you are making a Chrome app. Alternatively, for absolutely certain cross-browser compatibility (or some other reason) you could also send the script to your server (using Ajax) to be stored in a database, then linked to in the new window.
Just heard a lightening talk on http://vowsjs.org/ this evening. Haven't used it yet but I plan to explore this for testing web apps.