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

问题

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

回答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.

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/56254436/how-detect-a-specific-url-in-browser-and-get-html-page-associate-in-javascript

标签

javascript

html

firefox-webextensions