Chrome书签脚本开发：当前标签打开URL后注入HTML代码

嘿，我明白你想打造一个能一键打开指定页面并自动注入增强内容的书签脚本——你的思路没问题，但现有代码踩了个常见的坑：window.open('https://stackoverflow.com/','_self')会直接替换当前页面的导航，这时候后续的document.write其实是在旧页面的上下文里执行的，等新页面加载完成后，旧页面的内容早就被覆盖了，所以你看不到任何效果。

下面分两种场景给你可行的解决方案：

一、同域目标URL（目标页面和当前页面属于同一域名） #

如果目标URL和你当前打开的页面同域（比如都是你的个人网站页面），我们可以直接获取目标页面的HTML内容，修改后写入当前页面，这样就能在当前标签页打开增强版页面：

javascript:(function() {
  // 替换成你的目标同域URL
  const targetUrl = '/your-target-page.html';
  // 替换成你要注入的自定义HTML内容
  const injectHtml = '<div style="position:fixed;top:10px;right:10px;background:#ffd700;padding:10px;border-radius:5px;z-index:9999;">Page Booster 3000</div>';

  fetch(targetUrl)
    .then(response => {
      if (!response.ok) throw new Error('Failed to load target page');
      return response.text();
    })
    .then(pageHtml => {
      // 把自定义内容插入到页面body的末尾
      const enhancedHtml = pageHtml.replace('</body>', `${injectHtml}</body>`);
      // 写入并刷新当前页面
      document.open();
      document.write(enhancedHtml);
      document.close();
    })
    .catch(err => console.error('Booster error:', err));
})();

原理说明： #

• 用fetch获取目标页面的原始HTML（同域下浏览器允许这种操作）
• 把你要注入的内容追加到页面的</body>标签前，保证内容能正确显示
• 用document.open()和document.write()覆盖当前页面，实现“在当前标签页打开增强版页面”的效果

二、跨域目标URL（比如从任意页面跳转到Stack Overflow） #

如果目标URL和当前页面不同域，普通书签脚本会被浏览器的同源策略限制，无法直接修改目标页面的DOM（因为浏览器不允许跨域脚本操作其他域名的页面内容）。这时候有两个更靠谱的选择：

方案1：使用Chrome扩展（推荐，稳定且合规） #

Chrome扩展可以绕过同源限制，通过Content Script在目标页面加载完成后自动注入内容，步骤如下：

1. 创建一个名为page-booster的文件夹
2. 在文件夹里创建manifest.json（扩展配置文件）：

{
  "manifest_version": 3,
  "name": "Page Booster 3000",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://stackoverflow.com/*"], // 匹配目标URL
      "js": ["content.js"],
      "run_at": "document_end" // 页面加载完成后执行
    }
  ],
  "action": {
    "default_title": "Boost This Page"
  }
}

3. 在同一文件夹创建content.js（注入逻辑）：

// 注入自定义增强内容
const injectHtml = '<div style="position:fixed;top:10px;right:10px;background:#ffd700;padding:10px;border-radius:5px;z-index:9999;">Page Booster 3000</div>';
const container = document.createElement('div');
container.innerHTML = injectHtml;
document.body.appendChild(container);

4. 打开Chrome的扩展页面（chrome://extensions/），开启“开发者模式”，点击“加载已解压的扩展程序”，选择刚才创建的page-booster文件夹即可。

方案2：书签脚本的折中技巧（仅作演示，稳定性差） #

如果你坚持要用书签脚本，只能用一个折中方法：先跳转到目标页面，然后让用户再次点击书签脚本注入内容（但需要两次点击，体验不好）：

javascript:(function() {
  const injectHtml = '<div style="position:fixed;top:10px;right:10px;background:#ffd700;padding:10px;border-radius:5px;z-index:9999;">Page Booster 3000</div>';
  const targetUrl = 'https://stackoverflow.com/';

  // 如果当前页面是目标页面，直接注入内容；否则跳转到目标页面
  if (window.location.href.includes(targetUrl.split('//')[1])) {
    const container = document.createElement('div');
    container.innerHTML = injectHtml;
    document.body.appendChild(container);
  } else {
    window.location.href = targetUrl;
  }
})();

第一次点击会跳转到目标页面，第二次点击就会注入增强内容。

内容的提问来源于stack exchange，提问作者Peter White