Question

问题

我认为我已经将自己与过度复杂的chrome扩展混淆了，无法找到解决方案。

以下是扩展应该做的事情：

它应该通过chrome.declarativeContent.onPageChanged.addRules检查用户当前所在页面的URL和CSS并加载内容脚本
内容脚本向背景页面询问初始数据
后台页面将数据发回
内容脚本将数据发送到外部的mustache.js HTML模板（在此示例中包含单个选择标记）
内容脚本呈现模板并将其注入网站
每次选择值更改时，内容脚本会向背景发送消息，要求提供新数据

除了最后一个之外，每个点都可以正常工作。

所以我的问题是：我应该如何/在哪里检查select的.change（）事件

代码（简化版）

的manifest.json

{


    "manifest_version": 2, 
    "name": "Example extension", 
    "version": "4.20",  

    "background": {
        "scripts": ["background.js", "jquery-2.1.1.min.js"],
        "persistent": false
    },

    "content_scripts": [
    {
        "matches" : ["*://www.example.com/*"],
        "js" : ["jquery-2.1.1.min.js", "content.js", "mustache.min.js"]
    }],

    "page_action":{

        "default_icon":{
            "19" : "images/icon19.png",
            "38" : "images/icon38.png"
        }
    },

    "web_accessible_resources": [
        "to_be_injected.mustache.html"
    ],

    "permissions": [
        "http://www.example.com/*",
        "declarativeContent"
    ]


}

to_be_rendered.mustache.html

<script id="to_be_rendered">
    <select name="example-select" id="example-select">
        {{#options}}<option value='{{.}}'>{{.}}</option>{{/options}}
    </select>
</script>

content.js

chrome.runtime.sendMessage({type: "init"}, function(response_data) {
  injectHtml(response_data);
});

function injectHtml(response_data){
    $.get(chrome.extension.getURL('/to_be_rendered.mustache.html'),{})
        .done(function(template) {
            var rendered_template = Mustache.render($(template).filter('#to_be_rendered').html(), response_data);
            $("#container").append(rendered_template);
        });
}

编辑：语法

将消息传递给select的#change（）事件的背景

问题

代码（简化版）

0 个答案: