热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在Chrome扩展程序中使用Require.JS时触发chrome.runtime.onInstalled

如何解决《如何在Chrome扩展程序中使用Require.JS时触发chrome.runtime.onInstalled》经验,为你挑选了1个好方法。

我在安装扩展程序时执行一些设置代码时遇到问题.我正在使用Chrome开发者网站建议的chrome.runtime.onInstalled,但它没有解雇.似乎这个问题与Require.JS的使用有关.这是我的代码:

requirejs.config({...});// i'll not reproduce the whole config here for brevity

// Define the Global Object that will hold the extension functionality
var EXT = EXT || {};

// Start the main app logic.

requirejs(['chrome.storage', 'chrome.settings', 'chrome.tabs'],
function (chromeStorage, chromeSettings, chromeTabs) {
    'use strict';

    var getLocalRepos;

    /**
     * Executes the callback with an array of repositories as the parameter.
     * @param {function} callback
     */
    getLocalRepos = function (callback) {
        'use strict';

        chromeStorage.get('localRepos', callback);
    };

    // Take care of the extension lifecycle.
    chrome.runtime.onInstalled.addListener(function (details) {
        "use strict";

        // Create dummy data to populate the local storage for testing purposes.
        var dummyData = [
            {
                name: 'repo1',
                description: 'description1',
                username: 'reydel',
                age: 'theAge'
            },
            {
                name: 'repo2',
                description: 'description2',
                username: 'reydel',
                age: 'theAge'
            }
        ];

        switch (details.reason) {
            case 'install':
                chromeStorage.set({ localRepos: dummyData }, function () {
                    // Do nothing
                });
                break;
        }
    });

    // Bind all functions to an object in the Global Space to make them accessible from the outside scripts
    // referencing the BackgroundPage object
    window.EXT.getLocalRepos = getLocalRepos;
});

我在控制台中使用了监听器回调中的代码并且它可以工作,只是事件没有被触发.

关于如何解决这个问题的任何想法?有人以前做过吗?



1> Rob W..:

chrome.runtime.onInstalled加载代码后会直接触发该事件.当您异步添加事件侦听器onInstalled时,在添加事件侦听器时已分派事件.

要解决此问题,您必须使应用程序的初始化同步.不幸的是,require.js被设计为异步脚本加载器.修改此库以使其同步是可能的,但是浪费了努力而没有任何好处.

要在Chrome扩展中使用require-style模块(AMD),我强烈建议使用将脚本(例如r.js或grunt-contrib-requirejs)和almond.js组合为脚本加载器的中间构建步骤.相反,require.js,almond.js 支持同步加载.

这是一个配置示例,您可以使用它来构建一个名为all.jsalmond.js(作为脚本加载器)的单个文件,并mymain.js用作入口点(主脚本):

({
    name: 'mymain',
    out: 'all.js',
    include: [
        'almond'
    ],

    skipModuleInsertion: true,
    wrap: {
        start: '(function(){',
        // true = load synchronously. This is a feature of almond.js
        end: 'require(["mymain"], null, null, true);})();'
    }
})

为了避免命名空间污染,我将代码包装在一个立即调用的函数表达式中.如果您希望模块在全局命名空间中可用(例如,用于调试),只需删除(function(){})();.

有关这些配置选项(以及更多)的文档,请参阅https://github.com/jrburke/r.js/blob/master/build/example.build.js.


试试前面的例子:

    安装r.js:npm install -g requirejs

    将以前的配置保存为 myfancyname.build.js

    创建一个名为的脚本mymain.js:define(function() { ... });.
    (这是一个没有依赖关系的简单模块定义.如果要了解有关其他类型模块的更多信息,请阅读require.js文档,例如具有依赖关系的模块).

    运行r.js编译文件: r.js -o myfancyname.build.js

    现在,您all.js可以加载一个可以加载的文件,例如"background": { "scripts": ["all.js"] }在Chrome扩展程序的清单文件中使用.


推荐阅读
author-avatar
弹指一点红
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有