# 利用浏览器收藏夹给网站扩展新功能 * 抖音： * B站： 大家好今天给大家分享一下 如何利用浏览器的这个收藏夹 去扩展一些网站 从而去实现一些我们想要的功能 比方说现在这个网站哈 我就想一个一个字体的去试 看看哪个字体生成的 下边这个文字更好看一点 但是太麻烦了每一个我都需要点一下 然后再点一下提交 然后再点一个文字再点一下提交 所以呢我想能不能有一个按钮 然后点一下自动替我去预览下一个 好那我们来试一下 首先我们需要根据这个需求 写一段脚本 那这个需求分两步 第一步就是选中这个选择框里的 下一个 然后呢第二步是点这个按钮提交 我们来试一下先把控制台打开 那首先呢 我们先找到这个 select框 就这个 select name=FONT 我们来试一下哈 document.querySelector name=FONT 嘿找到了 然后呢我们来取它的 嗯 select selectedIndex 这是现在是第20个 那我们让他等于21试试 哎可以 所以呢 让他等于下一个 就是自身加1 就好了 ++ 行不行 哎可以！那我们用++ 好选中下一个之后呢 我们需要点一下这个 do it 看一下 这 do it 是一个image type=image相当于一个 submit（） 那他肯定是一个form表单 大家看这个，我们找一下form表单 好找到之后我们再调submit方法 哎可以了 然后你再把这两句代码合并一下 先调这个++ 然后再调这个submit 合并成这样一行 然后我们一起执行 大家看可以了 好有了这句代码以后呢 我们就可以去利用浏览器的收藏夹 去执行这段代码 为什么呢 我先把这个关掉哈 因为我们通常在 浏览器的地址栏里边 是可以执行javascript代码的 比如说 ：javascript:alert(1); 大家看！它是可以弹出来的 所以我在这 跳转到路径是javascript: 后边是刚才这段代码 理论上他就应该可以 哎不行 javascript 我看一下 找不到这个 selectedIndex 找不到这个 啊他这有frame 有frame的话 刚才我在这执行代码的时候 选择的应该是这个 （在第一个frame里面执行） 它是可以的 但如果在（浏览器）地址栏里边 相当于是在top里（最外层的网页）去执行这个代码 他就找不到 所以呢我们需要把这个代码改造一下 我们首先需要找到这个 frames 然后呢取它的应该是第0个 我们试一下哈 所以我们把刚才这个 0 包括这个 然后我们再在 top 里执行一下 复制一下（先） 哎！可以了 这回我们再在 浏览器里试一下：javascript 冒号粘贴 哎可以了 那接下来怎么做呢 我们需要把它添加到收藏夹里 这里边我已经加过了哈 已经加到书签里了 就是这个我们把它挪到上面来 挪到这以后呢我们右键修改 把这个网址改成刚才这个网址 javascript 粘贴过来 然后这里边我们改一下 比如说叫下一个 保存！好大家！看这有一个下一个 那平时不用的时候我会把它隐藏掉 就是 command + shift + B 然后再按一下它就显示出来了 这样然后用的时候呢就点一下 大家看！ 这样他就自动切换下一个然后去提交 然后去预览一下 那有了这个思路 我们其实可以做很多事情 比如说我这有一段写好了的脚本哈 我们打开一个 csdn 找一个带代码段的博客 比如说这个我们看有没有 好这个有 然后他现在不能复制 大家看选选中也不行 好点这就让我登录好 然后我们试一下哈 把这一段代码 然后我们把这个网页先收藏一下 然后呢把它拖到上面来 修改一下 javascript: 然后粘过来 然后这呢我们就叫 我要复制 好大家看现在选中不了 没反应！然后复制点的话 它还让我登录 我点下这个按钮 哎这样就可以选了 然后也可以复制了 大家看！复制过来了 好今天就到这里谢谢大家 再见 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sunzsh.gitbook.io/xiaoshan.bug/li-yong-liu-lan-qi-shou-cang-jia-gei-wang-zhan-kuo-zhan-xin-gong-neng.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.