I'm developing a Chrome packaged app which displays a certain kind of document as HTML. I have the app working to some degree, but would like to add a feature allowing the user to open a file by clicking on a link to an applicable file.
I am able to launch the app by MIME type as per the docs here, and am familiar with the pp::Instance::HandleDocumentLoad method to handle the clicked link's source, but am unsure how to display HTML I'm generating from the parsed document.
This is easy enough to do when the user manually launches the app and selects a file using an input element and the HTML file system since the HTML GUI is specified in the app manifest, but as far as I can tell, launching based on MIME type just embeds the NMF.
TL;DR: Is there a way to specify a HTML interface for (or a simple way to render HTML from) a NaCl module instance created by a nacl_modules manifest entry?
This is possible, but it's a bit of a hack. I copied the trick from here:
https://groups.google.com/d/msg/native-client-discuss/UJu7VXvV_bw/pLc19D50gbwJ
You can see how I did it here and here:
Basically, you listen on chrome.tabs.onCreated and chrome.tabs.onUpdated, then you inject a small bit of JavaScript that checks for the embed element with the correct mimetype. If it finds the element, it sends a message (via chrome.runtime.sendMessage) to your extension. When your extension gets that message, it injects the rest of your JavaScript into the page using chrome.tabs.executeScript. At this point you can display whatever you want.
You could do it earlier, by injecting your code into every page, but I found this was a bit nicer, as it only injects a small bit of code.
Related
I have an iFrame embedded in my Chrome extension popup which displays a webpage that I am in control of. I am able to send data from the iFrame to the Chrome popup script using sendMessage from my embedded website and onMessageExternal from my popup script, but I would also like to send data the other way around (such as the extension id - I can’t access this value within an iframe).
I’ve read about methods such as using the window.postMessage() function available in HTML5, and have investigated the method discussed here, although I am not sure the second method would work in the context I intend to use it in. If I were to use postMessage, I would not be able to confirm that the message was sent by my extension as there is no domain for me to check against unless I hardcoded my plugin id in, which I would like to avoid.
Is there another method of doing what I am trying to do, or would postMessage be the best way? I want to avoid query strings to make it somewhat more difficult to send an illegitimate request to my webpage. I’m not doing anything with sensitive data, I’m just using the data to make changes to the behaviour of the webpage based on whether it is running in an extension or running natively in the browser, and using the extension id for logging purposes.
I am trying to learn what could be the best ways of developing user interface for chrome extension for my application. The 2 approaches that I have come across are i)Using a browser action with default_popup html page or ii) Injecting some component into the page that is loaded in the tab. First approach is pretty straightforward but has some restricted use (like it is destroyed on tab/window switch which is useful in the context of my application). Coming to the second approach, it seems it requires every component which can be injected to be listed under web_accessible_resources. As the extension UI gets complex, this list is bound to increase. But surprisingly, Pocket extension's manifest does not seem to list any js files or html files though it does not use a popup page too. How does it work? Is there any other way of creating the user interface too?
Have you checked on the documentation regarding chrome.windows API? This API will allow you to create new windows and tabs in the browser, so you can create the html content from your extension. All you'll need is declaring the pertinent permissions on the manifest file. You can read more information here: https://developer.chrome.com/extensions/windows
I'm building a single-page Dart web app that will essentially consist of 1 Dart file (cross-compiled to JS) and 1 HTML file that has several "views" (screens, pages, etc.). in it. Depending on what "view" the user is currently located at, I will hide/enable different DOM elements defined inside this HTML file. This way the user can navigate between views without triggering multiple page loads.
I would still like to use each browser's native history-tracking mechanism, so that the user click can the back- and forward-buttons in the browser, and I'll have a Dart Historian object figure out what view to load (again just hiding/enabling DOM elements) depending on what URL the browser has in its history.
I've pretty much figured everything out, with one exception:
Say the user is currently "at" View #3, which has a URL of, say, http://myapp.example.com/#view3. Then they click a button that should take them to View #4 at, say, http://myapp.example.com/#view4. I need a way, in Dart, to tell the browser to:
Set http://myapp.example.com/#view4 in the browser URL bar
Add http://myapp.example.com/#view4 to the browser's history
If not already enabled, enable the browser's back button
I believe I can accomplish #1 above like so:
window.location.href = "http://myapp.example.com/#view3";
...but maybe not. Either way, how can I accomplish this (Dart code communicates with browser's history API)?
Check out the route library.
angular.dart also has it's own routing mechanism, but it's part of a much larger framework, so unless you plan on using the rest of it, I would recommend the stand-alone route library.
If you want to build your own solution, you can take a look at route's client.dart for inspiration.
There are two methods of history navigation supported:
The page fragment method that you've used. Reassign the window location to the new page fragment: window.location.assign(newPathWithPageFragment). Doing this will automatically add a new item to the browser history (which will then enable the back button).
The newer History API, which allows for regular URLs without fragments (e.g. http://myapp.example.com/view3. You can use window.history to control the history.The History API is only supported by newer browsers so that may be a concern (although given that dart2js also only supports newer browsers, there are probably not too many instances of a browser that dart2js supports that doesn't support the History API).
One issue you will have to handle if you support History API is the initial page load. When a user navigates to http://myapp.example.com/view3, the browser expects to find a resource at that location. You will have to setup your server to respond to any page request by serving your Dart application and then navigate to the correct view on the client-side. This issue will apply whether you use route, angular.dart, or build your own solution, since this is a general server-side issue and the above are all client-side libraries.
I am trying to make a Chrome extension for personal use that makes all the password fields type="text", so I can see the clear passwords. (I know that I can probably find something like this in the Chrome store, but it's something I want to do myself).
I am however having a hard time accessing the actual page content (the page I'm viewing in the tab). If I do
document.getElementById('text')
this selects the element from background.html not the page I'm viewing. How can I access the actual page?
Also, is there a way I can include an external javascript file so I can use functions from there?
You would need to use content script - javascript file injected into an actual page with access to DOM and events.
I have been reading the dev guide but haven't been able to work out how to put my own codes into webpages
I know it is possible because AVG uses it (in it's link scanner), and FastestChrome extension uses it too (highlight something and a link to a search pops up).
I have a backgrounded page but I can't get it to effect the webpages I go on (permissions are correct as I can get css to effect)
I am probably missing something really simple :/
It's not intuitively presented in the documentation but your background page can not access the current webpage b/c they are in different contexts. In other words the background page is it's own separate page so it has no access to any other page's DOM.
If you want to affect the page the user is viewing in the browser you will need to use what is referred to as a "content script".
If you want to communicate between content scripts and the background page you will need to refer to the message passing API. Check out my extension's source code for reference. I do exactly that.
Just remember...
Background Page: used for general logic in your extension, not anything page specific.
Content Scripts: are loaded into every page the user sees, and can manipulate that specific page.
Those probably use Content Scripts to inject Javascript into webpages. These scripts run in the context of the web pages and can access the DOM.
You can either define a script to always run in a web page by declaring the script file in the extension manifest, or you can use your background page to inject a script when needed.