HTML 获取URL并保存 | Chrome扩展

在本文中，我们将介绍如何使用HTML来获取URL并保存它。我们还将介绍如何将这个功能作为一个Chrome扩展来实现。

阅读更多：HTML 教程

什么是URL？

URL代表统一资源定位符（Uniform Resource Locator）。它是用来定位互联网上资源的网页地址。一个URL通常由协议、主机名、路径和查询参数等组成。例如，下面是一个URL的示例：

https://www.example.com/path?param1=value1&param2=value2

在这个URL中，“https”是协议，“www.example.com”是主机名，“/path”是路径，“?param1=value1&param2=value2”是查询参数。

获取当前页面的URL

我们可以使用JavaScript来获取当前页面的URL。HTML中的window.location.href属性包含当前页面的URL。以下是一个示例：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "当前页面的URL是：" + window.location.href;
</script>

</body>
</html>

在这个示例中，我们使用JavaScript的window.location.href来获取当前页面的URL，并将其显示在<p>元素中。

保存URL到文本文件

要保存URL到文本文件，我们可以使用Chrome浏览器的download属性。将download属性添加到链接或按钮上时，点击该链接或按钮将自动下载链接的URL。

以下是一个示例：

<!DOCTYPE html>
<html>
<body>

<a href="https://www.example.com" download>点击下载URL</a>

</body>
</html>

在这个示例中，我们在<a>标签上添加了download属性，并设置链接为要下载的URL。当用户点击这个链接时，浏览器将自动下载链接的URL。

创建Chrome扩展

现在，我们将介绍如何将以上功能作为一个Chrome扩展来实现。Chrome扩展是一种能够扩展和定制Chrome浏览器功能的小程序。

首先，我们需要创建一个名为manifest.json的文件，并在其中定义扩展的基本信息和功能。

{
  "manifest_version": 2,
  "name": "Save URL",
  "version": "1.0",
  "description": "保存当前页面的URL并下载",
  "permissions": [
    "downloads"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["content_script.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

在这个示例的manifest.json文件中，我们定义了扩展的基本信息，包括名称、版本和描述。我们还声明了扩展所需的权限和内容脚本，并指定了扩展的浏览器操作，默认弹出页面为popup.html。

接下来，我们需要创建popup.html文件作为扩展的弹出页面。

<!DOCTYPE html>
<html>
<body>

<button id="saveUrl">保存当前页面的URL</button>

<script src="popup.js"></script>

</body>
</html>

在popup.html文件中，我们创建了一个按钮来触发保存URL的操作，并引入了一个JavaScript文件popup.js。

现在，让我们创建popup.js文件并编写保存URL的逻辑。

document.getElementById("saveUrl").onclick = function() {
  chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
    var url = tabs[0].url;
    var link = document.createElement("a");
    link.href = url;
    link.download = "url.txt";
    link.click();
  });
};