chrome content scripts 开发

  • manifestjson
  • 安装插件
  • 网页完全加载之后执行脚本

manifest.json

{
    "manifest_version": 2,
    "name": "My extension",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": ["http://www.baidu.com"],
            "js": ["jquery-3.1.1.min.js", "tesseract.js", "worker.js", "main.js"],
            "run_at": "document_end"
        }
    ]
}

manifest_version: 固定设置为2
name: 插件名称
version: 插件版本
content_scripts: 脚本
matches: 定义哪些页面需要注入content script
js: 需要向页面中注入的javascript文件,按定义顺序注入
run_at: 控制content script注入的时机。可以是document_startdocument_end或者document_idle。缺省时是document_idle

  • document_start: 文件将在所有CSS加载完毕,但是没有创建DOM并且没有运行任何脚本的时候注入
  • document_end: 文件将在创建完DOM之后,但还没有加载类似于图片或frame等的子资源前立刻注入。
  • document_idle: 浏览器会在document_end和发出window.onload事件之间的某个时机注入。具体的时机取决与文档加载的复杂度,为加快页面加载而优化

安装插件

在chrome浏览器地址栏输入 chrome://extensions/ 打开扩展程序,选中 开发者模式 ,点击 加载已解压的扩展程序… 按钮加载扩展程序所在目录

网页完全加载之后执行脚本

run_at取值document_end,文件将在创建完DOM之后,但还没有加载类似于图片或frame等的子资源前立刻注入。如果需要在页面完全加载(图片或frame等子资源也加载)之后执行脚本,可以通过检查document.readyState属性来实现,例如

function waitForComplete() {
    if (document.readyState != "complete") {
        setTimeout(function() { waitForComplete(); }, 50);
    } else {
        // do something
    }
}

waitForComplete();

你可能感兴趣的:(chrome content scripts 开发)