谷歌浏览器中的bookmarklet小技巧

2025-02-02 04:33 来源：Chrome浏览器

在日常浏览网页时，许多人都依赖于书签来快速访问常用的网站。然而，除了简单的书签功能外，谷歌浏览器（Google Chrome）还支持使用bookmarklet（书签小工具），这是一种小巧的JavaScript程序，可以让你在浏览网页时增强浏览体验。本文将介绍几种实用的bookmarklet小技巧，帮助你更高效地使用谷歌浏览器。

### 什么是Bookmarklet？

Bookmarklet是一种特殊的书签，通常以JavaScript代码为基础。当你点击这个书签时，浏览器会执行其中的代码，实现特定的功能。由于它们是小型的JavaScript程序，bookmarklet可以直接在当前页中进行交互，提供一些便捷的功能，如文本翻译、网页截图或信息抓取。

### 如何创建Bookmarklet？

创建bookmarklet非常简单。只需按照以下步骤操作：

1. 在浏览器中打开任意网站。

2. 在书签栏上右键点击，选择“添加页面”或“添加书签”。

3. 在“名称”字段中输入你想要给bookmarklet取的名称。

4. 在“URL”字段中输入JavaScript代码，例如：

```javascript

javascript:document.body.style.backgroundColor='yellow';

```

这个代码将把当前网页的背景颜色改变为黄色。

5. 点击“保存”。

### 实用的Bookmarklet示例

1. **快速翻译**

你可以创建一个bookmarklet，用于快速翻译选中的文本。以下是一个简单的示例：

```javascript

javascript:var%20text=prompt('请输入要翻译的文本');window.open('https://translate.google.com/?text='+encodeURIComponent(text));

```

这个bookmarklet会弹出一个输入框，让你输入要翻译的文本，然后在新的标签页中打开谷歌翻译。

2. **网页截图**

使用以下代码可以快速截取网页并通过云服务保存：

```javascript

javascript:(function(){var%20d=document,e=d.createElement('script');e.src='https://html2canvas.hertzen.com/dist/html2canvas.min.js';d.body.appendChild(e);e.onload=function(){html2canvas(d.body).then(function(canvas){var%20data=canvas.toDataURL('image/png');window.open(data);});};})();

```

这个bookmarklet会利用html2canvas库创建网页截图，并以图片形式展示出来。

3. **快速清除页面样式**

如果你想要快速查看网页的纯文本内容，可以使用下面的代码：

```javascript

javascript:document.body.innerHTML=document.body.innerText;

```

点击后，当前页面的所有HTML标签将被去除，保留纯文本内容，方便阅读。

### 小贴士

- 在使用bookmarklet时，确保你了解代码的来源，避免使用来路不明的脚本，以确保你的网络安全。

- 你可以将多个bookmarklet合并在一起，创建一个“工具箱”书签，方便管理。

### 结语