使用内容脚本将代码插入页面上下文

JavaScript

TonyMandy

2020-03-13

我正在学习如何创建Chrome扩展程序。我刚刚开始开发一个捕捉YouTube事件的工具。我想将其与YouTube Flash Player结合使用(稍后,我将尝试使其与HTML5兼容)。

manifest.json:

{
    "name": "MyExtension",
    "version": "1.0",
    "description": "Gotta catch Youtube events!",
    "permissions": ["tabs", "http://*/*"],
    "content_scripts" : [{
        "matches" : [ "www.youtube.com/*"],
        "js" : ["myScript.js"]
    }]
}

myScript.js:

function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");

问题在于控制台为我提供了“开始!” ,但没有“状态已更改!” 当我播放/暂停YouTube视频时。

将此代码放入控制台后,它就可以工作了。我究竟做错了什么?

第1381篇《使用内容脚本将代码插入页面上下文》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小哥达蒙卡卡西 2020.03.13

我还遇到了已加载脚本的排序问题,这是通过顺序加载脚本解决的。加载基于Rob W的答案

function scriptFromFile(file) {
    var script = document.createElement("script");
    script.src = chrome.extension.getURL(file);
    return script;
}

function scriptFromSource(source) {
    var script = document.createElement("script");
    script.textContent = source;
    return script;
}

function inject(scripts) {
    if (scripts.length === 0)
        return;
    var otherScripts = scripts.slice(1);
    var script = scripts[0];
    var onload = function() {
        script.parentNode.removeChild(script);
        inject(otherScripts);
    };
    if (script.src != "") {
        script.onload = onload;
        document.head.appendChild(script);
    } else {
        document.head.appendChild(script);
        onload();
    }
}

用法示例为:

var formulaImageUrl = chrome.extension.getURL("formula.png");
var codeImageUrl = chrome.extension.getURL("code.png");

inject([
    scriptFromSource("var formulaImageUrl = '" + formulaImageUrl + "';"),
    scriptFromSource("var codeImageUrl = '" + codeImageUrl + "';"),
    scriptFromFile("EqEditor/eq_editor-lite-17.js"),
    scriptFromFile("EqEditor/eq_config.js"),
    scriptFromFile("highlight/highlight.pack.js"),
    scriptFromFile("injected.js")
]);

其实,我是JS的新手,所以随时向我介绍更好的方法。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android