JS如何任意篡改网页内容？-网页设计-锦华智联科技

核心思想

在浏览器中，网页本质上是一个由 HTML 结构、CSS 样式和 JavaScript 行为组成的文档，要修改网页内容，我们就是要用 JavaScript 来操作这个文档的 HTML 结构和 CSS 样式。

（图片来源网络，侵删）

浏览器控制台 - 最快、最直接的“魔改”方法

这是最常用、最简单的方法，无需安装任何东西，适合临时修改、调试和学习。

第一步：打开开发者工具

在任何网页上,按下以下快捷键之一：

Windows/Linux: F12 或 Ctrl + Shift + I
Mac: Cmd + Option + I

点击菜单中的 “Console” (控制台) 标签,你将看到一个可以输入代码的命令行界面。

第二步：使用核心命令

在控制台中，你可以使用几个核心的 JavaScript 命令来查找和修改元素。

（图片来源网络，侵删）

查找元素

你需要找到你想修改的那个网页元素（比如一个标题、一段文字、一张图片），最常用的方法是 document.querySelector()。

语法： document.querySelector('CSS选择器')
作用： 根据你提供的 CSS 选择器（和 CSS 中用法一样），找到页面上第一个匹配的元素。
示例：
- 找到页面上的第一个 <h1> 标签：document.querySelector('h1')
- 找到 ID 为 main-title 的元素：document.querySelector('#main-title')
- 找到 class 为 content 的元素：document.querySelector('.content')
- 找到 class 为 post-title 的所有 <a> 链接中的第一个：document.querySelector('a.post-title')

当你执行这些命令后，控制台会返回找到的元素对象，如果找不到，它会返回 null。

找到元素后,你就可以修改它的属性和内容了。

修改文本内容： 使用 element.textContent 属性。

（图片来源网络，侵删）

示例： 把页面上第一个 <h1> 的文字改成 "你好，世界！"

// 1. 找到 h1 元素
const myHeading = document.querySelector('h1');
// 2. 检查是否找到了元素（避免找不到元素时报错）
if (myHeading) {
    // 3. 修改它的文本内容
    myHeading.textContent = '你好，世界！';
}

修改 HTML 内容： 使用 element.innerHTML 属性，这可以让你插入复杂的 HTML 结构。
- 示例： 在一个 <div> 里插入一个标题和一段话。
```
const myDiv = document.querySelector('.some-div');
if (myDiv) {
    myDiv.innerHTML = '<h2>新标题</h2><p>这是一段新插入的HTML内容。</p>';
}
```

修改样式： 使用 element.style 属性。

示例： 把所有段落的文字颜色变成红色,背景变成黄色。

// querySelectorAll 会返回所有匹配的元素的集合（NodeList）
const allParagraphs = document.querySelectorAll('p');
allParagraphs.forEach(p => {
    p.style.color = 'red';
    p.style.backgroundColor = 'yellow';
    p.style.fontSize = '20px'; // 也可以添加其他样式
});

修改属性： 使用 element.setAttribute() 方法。

示例： 把页面上第一张图片的 src 属性换成另一张图片的链接。

const myImage = document.querySelector('img');
if (myImage) {
    myImage.setAttribute('src', 'https://new-image-url.com/image.jpg');
}

实战演练：修改一个网页

打开任意一个新闻网站（比如新浪新闻首页）。
按 F12 打开开发者工具，切换到 Console。

在控制台中输入以下代码,然后按回车：

// 修改网站顶部的Logo文字
const headerText = document.querySelector('h1');
if (headerText) {
    headerText.textContent = '魔改新闻网';
}
// 修改第一条新闻的标题
const firstNewsTitle = document.querySelector('.news-item h3'); // 假设新闻标题在 class 为 news-item 的 h3 标签里
if (firstNewsTitle) {
    firstNewsTitle.textContent = '震惊！我用JS修改了新闻标题！';
    firstNewsTitle.style.color = 'blue';
}
// 给整个页面加个背景色
document.body.style.backgroundColor = '#f0f8ff';

看看网页是不是立刻变了？刷新页面后，所有修改都会恢复,因为我们只是临时在控制台执行了代码。

创建书签小工具 - 可重复使用的“一键魔改”

如果你想把某个修改保存下来，方便随时一键应用,可以把它做成一个书签小工具。

第一步：创建书签

在你的浏览器书签栏中，随便右键一个现有书签，选择“编辑”。
将名称改成你喜欢的，页面变灰”。
关键一步： 在 URL 或网址字段中，输入以下代码（注意：javascript: 是必须的）：
```
javascript:document.body.style.filter = 'grayscale(100%)';
```
保存书签。

第二步：使用书签小工具

打开任意一个网页。
点击你刚刚创建的书签“页面变灰”。
整个页面瞬间就变成了黑白效果！而且这个效果比你用控制台做的更“持久”，只要不刷新页面,它就一直存在。

进阶：创建多功能书签

你也可以在书签的 URL 中写多行代码，用分隔。

javascript:
document.body.style.backgroundColor = '#121212'; // 背景变暗
document.body.style.color = '#ffffff'; // 文字变白
let allLinks = document.querySelectorAll('a');
allLinks.forEach(link => {
    link.style.color = '#00bfff'; // 链接变天蓝色
});

将这整段代码（从 javascript: 开始到最后的）复制到书签的 URL 字段中，保存，然后你就可以在任何网页上点击这个书签，一键实现“暗黑模式”效果。

创建浏览器扩展 - 最强大、最正式的解决方案

如果你想让你的修改功能更强大、更稳定，并且能随浏览器启动而自动执行，那么创建一个浏览器扩展是最佳选择，这比前两种方法复杂,但功能也最强大。

这里以创建一个简单的“文字高亮”扩展为例。

第一步：创建扩展文件

在你的电脑上新建一个文件夹，my-highlight-extension。

在这个文件夹里,创建以下三个文件：

manifest.json (扩展的“身份证”,必须文件)

{
  "manifest_version": 3,
  "name": "页面内容修改器",
  "version": "1.0",
  "description": "一个简单的示例扩展，用于高亮页面上的特定文字。",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

popup.html (点击扩展图标时弹出的小窗口)

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 200px; text-align: center; }
    button { width: 80%; padding: 8px; margin-top: 10px; }
  </style>
</head>
<body>
  <h3>内容修改器</h3>
  <button id="highlightBtn">高亮"示例文字"</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js (popup.html 里的逻辑代码)

document.getElementById('highlightBtn').addEventListener('click', () => {
  // 向当前活动标签页注入我们的JS脚本
  chrome.scripting.executeScript({
    target: { tabId: chrome.tabs.query({ active: true, currentWindow: true })[0].id },
    files: ['content.js']
  });
});

content.js (真正执行页面修改的脚本)

// 查找所有包含"示例文字"的节点
const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  {
    acceptNode: function(node) {
      if (node.nodeValue.includes('示例文字')) {
        return NodeFilter.FILTER_ACCEPT;
      }
      return NodeFilter.FILTER_SKIP;
    }
  }
);
// 遍历并高亮找到的文本
const textNodes = [];
let node;
while (node = walker.nextNode()) {
  textNodes.push(node);
}
textNodes.forEach(textNode => {
  const span = document.createElement('span');
  span.style.backgroundColor = 'yellow';
  span.textContent = textNode.nodeValue;
  textNode.parentNode.replaceChild(span, textNode);
});

icons/ 文件夹 (存放扩展图标)

你需要准备三个 png 图片，分别命名为 icon16.png, icon48.png, icon128.png，并放入一个名为 icons 的文件夹中，如果没有,可以从网上随便找三个替代。

第二步：加载扩展

在 Chrome 浏览器中，地址栏输入 chrome://extensions 并回车。
打开右上角的 “开发者模式” 开关。
点击左上角的 “加载已解压的扩展程序” 按钮。
选择你刚刚创建的 my-highlight-extension 文件夹。
如果一切顺利，你的扩展就会出现在列表中,并且浏览器右上角会出现你的扩展图标。

第三步：使用扩展

打开一个包含“示例文字”的网页。
点击浏览器右上角的你的扩展图标。
在弹出的窗口中点击“高亮'示例文字'”按钮。
页面上所有“示例文字”都会被黄色背景高亮显示。

方法	优点	缺点	适用场景
浏览器控制台	- 无需安装 - 即时生效 - 学习调试利器	- 临时性，刷新即失效 - 操作繁琐	快速临时修改、学习、调试、测试想法。
书签小工具	- 一键触发 - 可保存和复用 - 简单易用	- 功能有限 - URL 字段有长度限制	重复执行特定简单修改，如一键切换暗黑模式、翻译等。
浏览器扩展	- 功能最强大 - 可随浏览器启动 - 可与用户交互 - 最稳定	- 开发复杂 - 需要额外文件和图标	创建功能复杂、需要长期使用的专用工具，如广告拦截、网页美化、特定网站增强等。

希望这份教程能帮助你掌握用 JavaScript 修改网页内容的技巧！从控制台开始玩起来吧,这是最有趣的部分。