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.
Related
Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)
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.
In Chrome Dev Tools you can edit and make persistent changes to style elements.
https://developer.chrome.com/devtools/docs/workspaces
You can also edit any HTML from any site and preview it live, sort of editing any site including ones you don't own or have access to.
However, I want to persistently, for me at least, edit the HTML, not just the style elements. How can I do this?
More specifically, I want to change the URLs of the static resources as if they're on a CDN.
Now:
Request: http://www.targetsite.tld/
<html>
<img src="http://www.targetsite.tld/image1.jpg">
</html>
Goal:
Request: http://www.targetsite.tld/
<html>
<img src="http://testcdn.tld/targetsite.tld/image1.jpg">
</html>
Hosts file editing won't work as the initial request will then not resolve to the right server. I really want to load the document from the existing server, not save the entire source off somewhere, then edit that.
I've found this nodejs script but remain hopeful I could achieve something more simply on the client side within the browser.
http://www.deanmao.com/2012/08/28/modify-a-site-you-dont-own/
I probably need some kind of browser extension that allows me to tag certain dom element nodes, write some rewrites for them, save this profile and then reload the page.
Does something like this exist?
The answer is User Scripts. In particular, GreaseMonkey for FireFox and TamperMonkey for Chrome. These are browser add-ons/extensions which allow you to manipulate DOM elements on the pages you visit, using simple JavaScript to achieve your goals.
This route, I achieved my goal with one caveat:
The browser first parses the original HTML and hence then makes all the HTTP requests for the assets it finds on the original source page. Only then does the User Script manipulate the content. Any edits you make on-the-fly with your user script then gets loaded after the the original HTML. So in my case:
<img src="http://www.targetsite.tld/image1.jpg">
The original image gets requested from the original host. Then my user script in TamperMonkey manipulates the URLs, causing the browser to than also request my new img:
<img src="http://testcdn.tld/targetsite.tld/image1.jpg">
In other words, it doesn't so much replace the image, it duplicates the request, altering the second one. This, of course, has implications for performance measurements etc. So beware.
I want to modify chrome start page, change background and maybe logo.
I want to include jQuery in users local storage and load it while users page loads ( search page )
I never done anything with chrome so I want some way where to start. Do I go reading with apps or extensions?
As a rule of thumb: Choose an app if you want to develop an (independent) application that can stand on its own. If you want to interact with the browser (e.g. modify a web page), build an extension.
In your case, you definitely need an extension.
Change start page - use chrome_url_overrides in the manifest file to override newtab.
Locally store jQuery: Although it's possible to store jQuery in local storage, you're probably fine with packaging jQuery with your extension.
To add it to your user's "search page", you have to use a content script. By default, content scripts run in an execution environment that is different from the page (the document's DOM is shared though). Usually, this behavior is desired. If you really want to expose the jQuery library to the scripts in the page, take a look at this answer.
If you really want to load some script from a remote location and use it as a content script, read Chrome extension adding external javascript to current page's html.
I'm not sure what you mean by "change background and maybe logo". If you're referring to the browser's appearance, the only option to do that is by creating a theme. This must be a separate extension.
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.