Extract data from WebPage via chrome Extension - javascript

I am looking to make a chrome extension which is continuously scans the webpage I'm currently on, and looks for certain keywords that I type, and if those keywords are typed then do some action accordingly. How is this possible in JavaScript?
a rather simpler yet useful information would help a lot.

You will need to implement your keywords logic on content scripts.
If you need necessary information about chrome extensions - it can be found here.
At first you can look at extension documentation about content scripts and samples.
Documentation for extension API you can find here.

Related

Is there any way to inject code into a website via vscode

I found this question in stackoverflow, which is a bit similar but did not help me.
I would like to find some extension/plugin for vscode that would inject a JS and CSS code into a given URL.
For example, after setting a url in vscode, I create a js and when saving the file this script is injected into google chrome in the url mapped or in the tab that is open in chrome.
There is an extension to chrome that does just that: User JavaScript and CSS
This is non-trivial but definitely possible.
I sadly cannot provide you with all the necessary information as I am not sufficiently familiar with the way VSCode extensions function.
First of all, there is this project which you should take a look at. It's source code will have useful information.
Alternatively, and my personal recommendation, you should go with abusing the remote debugger which chrome provides. This project is a good example of how it can be used. It connects to the chrome remote debugger and exposes a REPL.
There is readily available documentation on how to use the remote debugger to execute arbitrary javascript.
The next part will be to make an actual extension which takes the above, ties it together and listens to a "on file save" event or something of the sort.

How to make a form-filling google chrome extension

I was wondering if anyone could provide me with some links to some tutorials or explain (with some example code), how I would go about making a simple google chrome extension (or in any programming language or browser if that is impossible), how I would make an extension that can visit a specific site, fill a login form on that site, click some links and then do the same sort of thing on the linked to site.
Thanks
Personally, I would not use a chrome extension, but maybe a perl script. There is an extension called WWW::Mechanize that is designed exactly to do this kind of stuff.
You can find plenty of tutorials and examples, just google it.
Edit in 2021: the above recommendation has become a bit outdated since 2013. For a more up-to-date take, I'd still recommend a scriptable headless browser instead of an extension for most automation tasks, but probably not WWW:Mechanize. There are good lists of options, such as this one.

What's a simple way in Google Chrome to insert Javascript into sites?

I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.
The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo
Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...
Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.
Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.
Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.
What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.

Help needed on writing extension for Google Chrome/Mozilla

I would like to create a extension for Google Chrome/Mozilla for the following requirement.
If I search for any text in a web page, If text is found then automatically background colour has to be added to that text.Basically it will be done by browser. But multiple searches are possible. So I need to make all the searched and found texts highlighted. I know very basics of writing extensions for Google chrome( I have learnt through http://code.google.com/chrome/extensions/getstarted.html ) . I have good knowledge on JavaScript. I don't have any basic idea to achieve the solution for my requirement. Please someone guide me on how to proceed further.
Although I don't have an answer for Google Chrome, making a Firefox addon is simple.
Take a look at the addon SDK and addon builder and the documentation for it. The first tutorial outlines the setups you will need to take and it should help get you started. Also, ou will probably need the page-mod library.

Can we insert javascript into any webpage loaded in the browser

I am looking into methods to inject javascript into any webpage loaded in the browser, so that I can traverse through the page's DOM. I use JQUERY for my scripting needs.
Method should work in all browsers.
I tried using IFRAME and adding some html into it, but I cant. Please suggest some ways.
Try using Greasemonkey: http://www.greasespot.net/. You can use it to execute custom scripts on page load for any website you want. You can find some basic tutorials here: http://wiki.greasespot.net/Tutorials.
I suggest to create a page with two iframes one to navigate to the designated website and other to get DOM Objects.
in the first one navigate to the site and then select its HTML and
append it in the body of the second Iframe.
iframe2.contentWindow.document.body.innerHTML = iframe1.contentWindow.document.body.innerHTML
then traverse the DOM Objects inside the second Iframe with your custom functions
There are a couple of approaches to solve this problem.
Using BookMarklet
You can create a simple bookmarklet which injects jQuery on the page and you can open Dev Console in your favorite browser and try out your DOM inspection using jQuery or whatever you want to try out.
Use Requestly Chrome Extension
You can use Requestly Script Rule to insert scripts on any webpage. Since your post mentions that you need jQuery, Requestly provides an option to include jQuery as well.
So with a simple click, you can write jQuery supported code without worrying about how jQuery will come in the page. Check these screenshots for reference :-
Script Rule Selection
Sample Script Supported by jQuery
Advantages
A Couple of advantages with using Requestly
You can share the script with other Users using the Requestly Share feature
jQuery is by default supported
After creating the rule, you can simply disable it once you are not using it.
Requestly is available on Firefox as well as Chrome so you can run your script cross-browser.
PS: This may be an older post but answering here because the question is still relevant.
Disclaimer: I am the founder of Requestly So you blame me if you don't like something.
You could create a bookmarklet (see http://en.wikipedia.org/wiki/Bookmarklet) which in turn can add a node to the page, with the src pointing to where your own javascript is located. Onde the script node gets added it will run.
You can find more details on http://www.johnvey.com/features/deliciousdirector/ under "how does it work?". This way you can have a bookmark in your bookmarks bar which, when click, will add your script to any page you happen to be on.
I'm using for Chrome TamperMonkey to add custom scripts for a specific web page which is as well awesome and I can really recommend it.
If I understand correctly, you want to execute a javascript code in any websites you are using in any browser. That means you have to go browser by browser different applications. In chrome supports extension same as firefox, edge, safari browsers supports add-ons. You can add the relevant extension to do that. I am using a scripting extension, that can run the given script whenever I open the page with same URL given in the script. Likewise you have to find different applications for different browsers.
You can't run Javascript on arbitrary Web pages that you do not control the content of. It would be a huge security hole if that were not true.
Think about it: you could run Javascript and wait for someone to log on to their internet banking and then do something with the characters input.
Take a look at jquery JSON and Wikipedia's JSON page.
Alternatively you can simply add a <script> tag to the document:
$("head").append('<script src="..." type="text/javascript"></script>');
This will load the javascript file.

Categories