如何在浏览器扩展的content.ts脚本中引入使用AlertifyJS弹窗？

开发者阿泽

2026-9-23

解决方法

步骤1：整理静态资源

将你已经在引导页使用的alertify.min.js和alertify.min.css放到扩展项目的静态资源目录中，无需单独修改文件内容。

步骤2：选择注入方式

方式一：通过manifest.json全局声明注入（推荐，无CSP拦截问题）

直接在扩展的配置文件中声明资源自动注入到匹配站点，加载完成后content.ts可直接调用alertify对象。

Manifest V3 配置示例：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 可替换为你需要适配的站点规则
      "css": ["你的实际路径/alertify.min.css"],
      "js": ["你的实际路径/alertify.min.js", "content.ts"], // 注意加载顺序：先加载Alertify再加载你的业务脚本
      "run_at": "document_end"
    }
  ]
}

Manifest V2 配置逻辑一致，对应修改字段规则即可。

方式二：content.ts动态注入（适合按需加载场景）

如果不需要所有页面提前加载Alertify，可在需要用到时再动态插入资源。

先在manifest.json中声明资源可被站点访问：

Manifest V3 配置示例：

{
  "web_accessible_resources": [
    {
      "resources": ["你的实际路径/alertify.min.js", "你的实际路径/alertify.min.css"],
      "matches": ["<all_urls>"]
    }
  ]
}

在content.ts中添加注入逻辑：

// 注入样式
const alertifyCss = document.createElement('link')
alertifyCss.rel = 'stylesheet'
alertifyCss.href = chrome.runtime.getURL('你的实际路径/alertify.min.css')
document.head.appendChild(alertifyCss)

// 注入脚本
const alertifyJs = document.createElement('script')
alertifyJs.src = chrome.runtime.getURL('你的实际路径/alertify.min.js')
alertifyJs.onload = () => {
  // 加载完成后即可调用
  ;(window as any).alertify.success('调用成功')
}
document.head.appendChild(alertifyJs)