How detect a specific url in browser and get html page associate in Javascript?

Question

I need to modifiy a html page with javascript (fill a field). I have a specific url but i do not know how to listen when the browser is on the right url and get the html code associate.

I do it with a webextension, so the javascript has to check url in the web browser and get html from here.

Thank you for helping me

Ridglea

@Lewis – Injecting the content script into every single page and then testing the URL from inside the script is a pretty poor approach that demands more trust from the user installing the script. That's not a good approach. – Precipitate

@Ridglea - just following up. Was your question answered satisfactorily? If there is more I can help with, please add a comment below my answer, or edit your question to clarify what else you want to know. Otherwise, it would be great if you could choose a "best answer" (by clicking the checkmark beside the answer) to close out the question. If no answer provided helpful information, please add your own answer and select that as the best answer. Remember, too, that you can upvote any answers you found helpful in any way - you can also upvote the answer you checkmark, if desired. Thanks! – Elburr

Answer 1

When I type firefox extension tutorial into Google, the first hit is this tutorial from MDN. Very close to the top of it is has this code example:

Now create a new file called "manifest.json" directly under the "borderify" directory. Give it the following contents:

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}

and says

The most interesting key here is content_scripts, which tells Firefox to load a script into Web pages whose URL matches a specific pattern. In this case, we're asking Firefox to load a script called "borderify.js" into all HTTP or HTTPS pages served from "mozilla.org" or any of its subdomains.

So in your manifest, change "*://*.mozilla.org/*" to something which matches the page you want to run your script on.

The content script ("borderify.js") should be able to access the DOM of that page using standard methods like querySelector.

Precipitate

Answer 2

Your question is a little vague, but if I correctly understand...

If you want to fill-out a field on a webpage and/or click a button, then you probably want to use a Firefox extension called Tampermonkey.

Tampermonkey allows you to create scripts for any website(s) you desire, and those scripts will inject (and run) additional javascript code (that you provide) on the page. Frankly, it works amazingly well - I have created scripts for dozens and dozens of websites that do everything from logging me in to a site, to removing ads/images/clutter, to completely reformatting the page.

Obviously, TM scripts only run on your computer and only change the website appearance for you, on that computer only.

A basic Tampermonkey script looks like this:

// ==UserScript==
// @name         SO Hide HNQ
// @namespace    http://tampermonkey.net/
// @match        https://stackoverflow.com/questions/*
// @match        https://stackoverflow.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var myHnq = document.getElementById('hot-network-questions');
    myHnq.style.display = 'none';
})();

Note that it is also possible to use jQuery in your TM scripts by adding this line

// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js

somewhere in the // ==/UserScript== block.

Elburr

They said they were writing an web extension, not using Tampermonkey. – Precipitate

Yes, but I was focussing on what he wanted to do rather than how he wanted to do it. TM is loads simpler than writing a web extension - perhaps it will suit his needs better. – Elburr

Answer 3

You are looking for webnavigation oncomptete event. for that you need webNavigation permission

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete') {
    if (tab.url.indexOf("__your__url") != -1) {
      alert("__your__url loaded");
     //here do your work 
    }
  }
});

You have to write this in background JS. you need to pass message to content script and form there you have to do the work

More about this https://developer.chrome.com/extensions/webNavigation#event-onCompleted

More about message passing https://developer.chrome.com/apps/messaging

Gravamen