Chrome扩展开发的简介与实战(6)

学习

如何对原生的JS进行注入

需求

在开发过程中，有时候需要对原生的网页中js加以利用。譬如有这些用途：

• 触发原生的js方法，模拟按钮按下
• 利用原生js所注册的事件，以达到在相应的时机做某些操作
• 其他等等

利用content script注入

我们之前学习了一些content script的知识，知道它是运行在一个孤立的世界中，如果网页的作者写的js文件，我们是无法在content script中加以利用的。

不过我们还是有方法的。可以通过一种方法来注入原生网页。然后再利用html 5的消息传递机制。

例子

manifest.json

{
    "description": "origin js inject",
    "manifest_version": 2,
    "name": "sample 6-1: inject 2",
    "version": "1.0",
    "content_scripts": [{
        "matches": [
            "https://*.cybozu.com/k/*",
            "https://*.cybozu.cn/k/*"
        ],
        "js": [
            "contentScript.js"
        ]
    }],
    "web_accessible_resources": [
        "inject.js"
    ]
}

contentScript.js

let myScript = document.createElement('script')
myScript.src = chrome.extension.getURL('inject.js');
(document.head || document.documentElement).appendChild(myScript)
window.onmessage = function (event) {
    console.log(event)
    console.log(event.data.msg)
}

inject.js

kintone.events.on('app.record.index.show', function (event) {
    window.postMessage({
        "msg": "レコード一覧画面が表示されました！"
    }, document.URL)
})

解说

首先，我们在contentScript.js中调取了外部js文件injent.js并把它加入到了HTML的DOM中。

现在injent.js已经成为原生js的一部分了。
所以现在我们就可以使用kintone所准备的方法了。

我们的思路是：当一览打开时，会触发上述方法，在此时，发一条消息，然后再用content script里的window.onmessage来接受这条消息

这里需要稍微提一下window.postMessage方法，这是html 5标准中所提供的方法，它可以跨窗口或者叫做跨tab地传递消息。值得留意的是，这个消息会向浏览器所有的窗口发送，别的网页上如果想获取这条消息是完全可能的。而且，我们也可能收到别的不相关网页所发送的信息。所以，我们在发送消息时可以加上一些特殊识别字段，在接受端来判断这条消息来源。这样可以避免误接受了别人的消息。

另外，需要认识到的是，不是所有的网页正好提供了例子中的类似"一览打开了的时候"这样的注册好了的方法。在实际运用中，你想要达到的目的未必能很好地达成，因为原生js作者不是为了让你注入而写的。所以，如何利用好原生js，还仰仗对原生js有着怎样深刻的了解。

课堂练习

目标

基础：kintone详细画面打开后，把所有的详细内容打印在console上。

提高：把详细内容传回content script，并存储到chrome.storage

提示

kintone中文文档:记录显示事件

• 以课堂的例子为基础结构
• 因为要求是详细画面的打开，所以kintone的事件名称需要替换
• 根据kintone的文档，找到代表详细内容的变量并打印