"js": ["content.js"]

}

],

"permissions": ["activeTab"]

```

创建一个名为`content.js`的文件：

```javascript

document.addEventListener('DOMContentLoaded', () => {

let p = document.createElement('p');

p.textContent = 'This text was injected by a Chrome extension!';

document.body.appendChild(p);

});

```

将这两个文件放在同一个目录中，然后在Chrome浏览器中打开`chrome://extensions/`页面，启用开发者模式并加载该目录作为扩展程序。

#### 优点：

可以跨站点注入脚本，功能强大。

适合开发浏览器插件或扩展程序。

可以访问和修改网页的DOM。

#### 缺点：

需要用户安装扩展程序，有一定的使用门槛。

开发和调试相对复杂。

受Chrome扩展API的限制。

### 五、表格比较不同方法的特点

| 方法 | 优点 | 缺点 | 适用场景 |

|----------------|--------------------------------------------------------------|------------------------------------------------------------|----------------------------------------------------------|

| 内联脚本 | 简单易用，无需额外HTTP请求 | 不适合大型脚本，不利于代码复用 | 小型项目或快速测试 |

| 嵌入式脚本 | 可在页面加载完成后执行，避免阻塞页面渲染 | 不利于代码复用，可能使HTML文件复杂 | 中等大小的脚本，需要在页面加载后执行 |

| 外部脚本 | 提高代码的可维护性和可读性，便于代码复用和模块化 | 需要额外的HTTP请求，可能影响首次加载性能 | 大型项目或需要高度模块化的代码 |

| Chrome扩展 | 可以跨站点注入脚本，功能强大 | 需要用户安装扩展程序，开发和调试复杂 | 开发浏览器插件或扩展程序，需要跨站点修改网页内容的场景 |

### 六、FAQs

**Q1: 何时使用内联脚本？

A1: 内联脚本适用于小型项目或快速测试，当你需要立即执行少量JavaScript代码时可以使用内联脚本，对于大型项目或需要高度模块化的代码，建议使用外部脚本。

**Q2: Chrome扩展如何注入脚本到特定网站？