Question

我正在尝试创建Chrome扩展程序，将spotify: URI转换为可点击链接。代码没问题（解析，替换等），一切都在“经典”网站上运行良好。

但是，在使用网络客户端环聊（hangouts.google.com）时，每个聊天窗口都是动态创建的新iframe，并且脚本似乎无法执行。

正如我所读到的，在iframe中执行脚本并不是最简单的事情。感谢SO上的另一篇文章，我实现了将我的JS文件加载到iframe，但代码仍未执行...

的manifest.json

{
    "manifest_version": 2,

    "name": "Spotilink",
    "description": "Transforms Spotify's URI into a clickable link",
    "version": "0.1",

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["findAndReplaceDOMText.js", "spotilink.js", "script.js"],
            "all_frames": true
        }
    ],

    "permission": [
        "active_tabs"
    ],

    "web_accessible_resources": ["script.js"]
}

script.js（可能是丑陋的代码，MVP用途）

var s = document.createElement('script');
var t = document.createElement('script');
s.src = chrome.extension.getURL('findAndReplaceDOMText.js');
t.src = chrome.extension.getURL('spotilink.js');
s.onload = function() {
    this.remove();
};
t.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);
(document.head || document.documentElement).appendChild(t);

spotilink.js

document.addEventListener("DOMContentLoaded", findAndReplaceDOMText(document.documentElement, {
    find: /[A-Za-z0-9]*/gi,
    replace: function(portion, match) {
        var a = document.createElement('a');
        a.className = 'spotilink';
        a.setAttribute('href', match);
        a.textContent = portion.text;
        return a;
    }
}));

findAndReplaceDOMText.js

只是一个解析DOM并替换匹配元素的库。

总结一下：解析和替换很好（spotilink.js和findAndReplaceDOMText.js可以完美地完成工作），但在动态创建的iframe中获得相同结果并不是同一块蛋糕。

我想错过哪些东西吗？

在新创建的iframe上执行Chrome扩展程序中的脚本

0 个答案: