从Kick Ass 而来的一点想法模仿Kick Ass实现点击书签栏中的书签，修改当前网页元素的outline样式，给每

前面

今天翻文章的时候看到了第三式：芙蓉面，杨柳腰，无物比妖娆——让你看清UI的轮廓，便跃跃欲试操作了一下，打开控制台，找到style，添加outline，成功！

但是有点太笨了，应该怎么样才能优雅一点？我想起了在书签栏吃灰的Kick Ass，能不能像他这样，在书签栏收藏后点击一下，就可以自动让我看清UI的轮廓呢

先看看Kick Ass怎么实现的

我已经忘记Kick Ass是什么时间且如何跑到书签栏上面的了，不然的话应该不会这么曲折

看到了一个同学分享的自己实现的小飞机

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>又见苍岚-飞机 Demo</title>  
  </head>  
  <body>  
    <p><span> 玩法说明： </span></p>  
    <p><span> 1. 方向键控制飞机 </span></p>  
    <p><span> 2. 空格发射子弹 </span></p>  
    <p><span> 3. B 键查看目标 </span></p>  
    <p><span> 4. ESC 退出 </span></p>    
    <button id="myButton">召唤飞机</button>
    
    <script>
      // 为按钮添加事件处理器  
      document.getElementById('myButton').onclick = function() {  
        console.log('Attack！');  
        // 定义要执行的JavaScript代码  
        var KICKASSVERSION='2.0';  
        var s = document.createElement('script');  
        s.type='text/javascript';  
        document.body.appendChild(s);  
        s.src=
          'https://uipv4.zywvvd.com:33030/HexoFiles/js/games/airplane/airplane.js';
        void(0);  
      };  
    </script>
  </body>  
</html>

注入一段js代码，方式是创建一个script标签，引入写好的飞机射击程序，

同理

要实现标记代码轮廓那就创建style标签，写上outline样式就可以了

动手（包含试错部分）

先是把代码改了改，改成这样

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>又见苍岚-飞机 Demo</title>  
  </head>  
  <body>  
    <p><span> 玩法说明： </span></p>  
    <p><span> 1. 方向键控制飞机 </span></p>  
    <p><span> 2. 空格发射子弹 </span></p>  
    <p><span> 3. B 键查看目标 </span></p>  
    <p><span> 4. ESC 退出 </span></p>    
    <button id="myButton">召唤飞机</button>
    
    <script>
      // 为按钮添加事件处理器  
      document.getElementById('myButton').onclick = function() {  
        console.log('Attack！');  
        // 定义要执行的JavaScript代码  
        var KICKASSVERSION='2.0';  
        var s = document.createElement('style');  
        s.textContent = `html * {outline: 1px solid red;}`
        document.head.appendChild(s);
        void(0);
      };  
    </script>
  </body>  
</html>

可以实现点击按钮后出现outline了

怎么收藏后，点击直接跳转到我这个页面了，我的一点直接把当前网页全部加上outline去哪了

原来走错路了人家本来就是在自己写的页面上出现的飞机，改造后的也仅仅是用js修改页面样式，那该怎么才好，还得回到开始的地方，看看Kick Ass怎么回事

需要用到了一个叫Bookmarklet的小知识点

Bookmarklet 是一个伪装的"网址"，实际上是一段 JavaScript 代码。

一句话解释

把 javascript: 开头的代码存到书签里，点击时浏览器会执行这段代码。

为什么叫 Bookmarklet

单词	含义
Bookmark	书签
-let	小东西（类似 applet、leaflet）

合起来就是「小书签」，但功能远超普通书签。

核心原理

普通书签：

https://google.com          ← 打开网页

Bookmarklet：

javascript:alert('Hello')   ← 执行代码

点击时，浏览器把 javascript: 后面的内容当成 JS 执行，而不是跳转页面。就是零安装、即点即用

你要这么说我就懂了

方法一：手动创建书签（推荐）

第一步： 在浏览器书签栏空白处右键 → 点「添加书签/网页」

第二步： 在弹出框里填写：

名称：随便填，比如 注入样式
网址/URL：把下面这段代码整个粘贴进去

javascript:(function(){if(document.getElementById('my-injected-style'))return;var style=document.createElement('style');style.id='my-injected-style';style.textContent='html * { outline: 1px solid red }';document.head.appendChild(style);})();

第三步： 点保存 ✅

方法二：拖拽法（需要页面上有链接）

如果网页上有一个 <a> 标签，href 是 javascript:...，可以直接拖到书签栏。

可以在本地建一个 HTML 文件测试：

<!DOCTYPE html>
<html>
<body>
  <p>把下面这个链接拖到书签栏 👇</p>
  
  <a href="javascript:(function(){if(document.getElementById('my-injected-style'))return;var style=document.createElement('style');style.id='my-injected-style';style.textContent='html * { outline: 1px solid red }';document.head.appendChild(style);})();">
    🎨 注入样式
  </a>
</body>
</html>