如何检测浏览器中的特定 url 并在 Javascript 中获取 html 页面关联？

Question

我需要用javascript 修改html 页面（填写字段）。 我有一个特定的 url，但我不知道当浏览器在正确的 url 上时如何监听并获取 html 代码关联。

我通过网络扩展来做到这一点，所以javascript 必须在网络浏览器中检查 url 并从这里获取html。

谢谢你帮助我

Answer 1

当我在 Google 中输入 firefox extension tutorial 时，第一个点击是 this tutorial from MDN。非常接近它的顶部是有这个代码示例：

现在直接在下面创建一个名为“manifest.json”的新文件 “边界化”目录。给它以下内容：

{

  "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"]
    }
  ]

}

说

这里最有趣的关键是 content_scripts，它告诉 Firefox 将脚本加载到 URL 与特定模式匹配的网页中。 在这种情况下，我们要求 Firefox 加载一个名为 将“borderify.js”添加到从“mozilla.org”提供的所有 HTTP 或 HTTPS 页面中 或其任何子域。

因此，在您的清单中，将 "*://*.mozilla.org/*" 更改为与您要运行脚本的页面匹配的内容。

内容脚本 ("borderify.js") 应该能够使用 querySelector 等标准方法访问该页面的 DOM。

Answer 2

您正在寻找 webnavigation oncomptete 事件。为此，您需要webNavigation 权限

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 
    }
  }
});

你必须在后台 JS 中编写这个。您需要将消息传递给内容脚本并在那里形成您必须完成的工作

更多关于这个 https://developer.chrome.com/extensions/webNavigation#event-onCompleted

有关消息传递的更多信息 https://developer.chrome.com/apps/messaging

Answer 3

你的问题有点含糊，但如果我理解正确的话......

如果您想填写网页上的字段和/或单击按钮，那么您可能需要使用名为 Tampermonkey 的 Firefox 扩展。

Tampermonkey 允许您为所需的任何网站创建脚本，这些脚本将在页面上注入（并运行）额外的 javascript 代码（您提供）。坦率地说，它运行得非常好 - 我已经为几十个网站创建了脚本，这些脚本可以完成从登录网站到删除广告/图像/杂乱，再到完全重新格式化页面的所有操作。

显然，TM 脚本仅在您的计算机上运行，​​并且仅在该计算机上为您更改网站外观。

一个基本的 Tampermonkey 脚本如下所示：

// ==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';
})();

请注意，也可以通过添加此行在您的 TM 脚本中使用 jQuery

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

// ==/UserScript== 块中的某处。