CN110968358A - 一种基于浏览器插件加载脚本模块的方法及装置 - Google Patents

Abstract

本发明实施例提供一种基于浏览器插件加载脚本模块的方法及装置，该方法包括：浏览器调用浏览器插件开始加载第一脚本模块；当所述第一脚本模块需要调用第二脚本模块时，所述浏览器插件调用预先注册的依赖接口传入所述第二脚本模块的路径信息；所述浏览器插件基于所述第二脚本模块的路径信息，加载所述第二脚本模块；在所述第二脚本模块加载完成后，所述浏览器插件完成所述第一脚本模块的加载。如此，能够使得浏览器插件也支持脚本模块载入，提高了开发效率，降低了维护成本。

Description

一种基于浏览器插件加载脚本模块的方法及装置

技术领域

本发明实施例涉及前端开发技术领域，尤其涉及一种基于浏览器插件加载脚本模块的方法及装置。

背景技术

随着互联网的飞速发展，网站功能逐渐丰富，网页中的脚本，如JavaScript(简称JS)也变得越来越复杂和臃肿，使得Web前端开发越来越复杂。而脚本模块化开发可以解决繁琐的文件依赖问题，同时也能提高了代码的维护性，具有易维护、易扩展等优点，逐渐成为了Web开发的主流方式。

由于脚本模块之间存在依赖关系，例如，JS模块1依赖JS模块2，而JS模块2又依赖JS模块3、4等，而且在载入脚本模块时必须严格保证加载顺序，但是，目前的浏览器插件如Chrome插件，却只提供单脚本文件载入的方式，使得浏览器插件不支持脚本模块化载入，也使得浏览器插件中无法使用诸如require.js、curl.js等能够提供脚本模块载入的第三方库，从而，导致浏览器插件中无法使用脚本模块化开发。这样，在开发人员需要开发浏览器插件来扩展浏览器的功能时，由于浏览器插件不支持标准化的脚本模块化开发，导致实现浏览器插件的功能的代码必须事先写死在插件代码中，这样，在依赖关系很复杂时，往往会造成开发效率低下、代码维护困难的问题。

发明内容

有鉴于此，本发明实施例提供一种基于浏览器插件加载脚本模块的方法及装置，能够使得浏览器插件也支持脚本模块载入，降低了维护成本，提高开发效率。

为解决上述技术问题，本发明实施例提供如下技术方案：

第一方面，本发明实施例提供一种基于浏览器插件加载脚本模块的方法，所述方法包括：浏览器调用浏览器插件开始加载第一脚本模块；当所述第一脚本模块需要调用第二脚本模块时，所述浏览器插件调用预先注册的依赖接口传入所述第二脚本模块的路径信息；所述浏览器插件基于所述第二脚本模块的路径信息，加载所述第二脚本模块；在所述第二脚本模块加载完成后，所述浏览器插件完成所述第一脚本模块的加载。

第二方面，本发明实施例提供一种基于浏览器插件加载脚本模块的装置，所述装置包括：浏览器和安装在所述浏览器内的浏览器插件，其中，所述浏览器，用于调用浏览器插件开始加载第一脚本模块；所述浏览器插件，用于当所述第一脚本模块需要调用第二脚本模块时，调用预先注册的依赖接口传入所述第二脚本模块的路径信息；基于所述第二脚本模块的路径信息，加载所述第二脚本模块；在所述第二脚本模块加载完成后，完成所述第一脚本模块的加载。

第三方面，本发明实施例提供一种计算机可读存储介质，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行上述基于浏览器插件加载脚本模块的方法的步骤。

第四方面，本发明实施例提供一种电子设备，所述电子设备包括：至少一个处理器；以及与所述处理器连接的至少一个存储器、总线；其中，所述处理器、存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行上述基于浏览器插件加载脚本模块的方法的步骤。

本发明实施例提供的基于浏览器插件加载脚本模块的方法及装置，在浏览器调用安装在浏览器内的浏览器插件后，浏览器插件就会开始加载第一脚本模块；接下来，在加载第一脚本模块的过程中，当第一脚本模块需要调用第二脚本模块时，浏览器插件就会调用预先注册的依赖接口传入该第二脚本模块的路径信息，然后，浏览器插件就可以基于第二脚本模块的路径信息，开始加载第二脚本模块。最后，在第二脚本模块加载完成后，浏览器插件完成第一脚本模块的加载。这样，当浏览器插件加载依赖了第二脚本模块的第一脚本模块时，能够通过预先注册的依赖接口传入该第二脚本模块的路径信息，来实现在加载完第二脚本模块后，完成第一脚本模块的加载过程。从而，使得浏览器插件也能够支持脚本模块载入，无需将实现浏览器插件功能的代码事先写死在插件代码中，能将代码分离成独立的多个模块，方便代码重用，降低了维护成本，提高开发效率。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1为本发明实施例中的基于浏览器插件加载脚本模块的方法的流程示意图；

图2为本发明实施例中的基于浏览器插件加载脚本模块的装置的结构示意图；

图3为本发明实施例中的电子设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

本发明实施例提供一种基于浏览器插件加载脚本模块的方法，该方法可以应用于各种需要通过浏览器插件加载脚本模块的场合。

这里，浏览器插件是指使用Web开发技术所开发的、能够运行在浏览器中的、用于增强浏览器功能的扩展程序。在实际应用中，上述浏览器插件可以由各种类型的浏览器中的插件来实现。例如，上述浏览器插件可以为Chrome浏览器的插件，也可以为360浏览器的插件，还可以为其它类型的浏览器的插件，如搜狗浏览器、Safari浏览器、QQ浏览器等。这里，本发明实施例不做具体限定。

在实际应用中，脚本模块是指使用诸如JS、Scala、VBScript、ActionScript、MAXScript、ASP、JSP、PHP、Perl、Shell、python等脚本语言所编写的模块。示例性地，脚本模块可以是通过JS脚本语言编写的，则脚本模块均为JS模块。

具体来说，一个脚本模块就是一个脚本文件，但是，脚本模块与普通的脚本文件的区别在于，脚本模块中是可以依赖其它脚本模块的，此时，在开始加载该脚本模块后，还需要先将其所依赖的其它脚本模块加载完成，才能完成该脚本模块的加载过程，而普通脚本文件会将实现功能的代码全写进去，不调用其它脚本文件。

图1为本发明实施例中的基于浏览器插件加载脚本模块的方法的流程示意图，参见图1所示，该基于浏览器插件加载脚本模块的方法可以包括：

S101：浏览器调用浏览器插件开始加载第一脚本模块；

其中，第一脚本模块依赖第二脚本模块。

具体来说，上述第一脚本模块可以包括用于实现某一功能的浏览器插件的入口代码，这样，在需要使用浏览器插件所提供的功能时，浏览器就会调用浏览器插件，从而，就会自动触发浏览器插件开始加载实现其功能所需的第一脚本模块。

在实际应用中，根据第一脚本模块所需要调用的脚本模块的数量的不同，上述第二脚本模块的数量可以为一个，也可以为多个，如两个、三个等。这里，本发明实施例对第一脚本模块所调用的第二脚本模块的数量不做具体限定。此外，上述第二脚本模块可以依赖其它脚本模块，也可以不依赖其它脚本模块。

在实际应用中，可以通过各种事件来触发浏览器调用浏览器插件。举例来说，可以在浏览器启动的时候自动加载首页面时触发浏览器调用浏览器插件，也可以是指在浏览器启动后，用户在浏览器的地址栏中输入目标页面的网址并按下回车时触发浏览器调用浏览器插件，当然，还可以为其它情况，如从当前页面跳转到目标页面时触发浏览器调用浏览器插件。这里，本发明实施例不做具体限定。

在具体实施过程中，上述S101可以包括以下步骤A1～A3：

步骤A1：浏览器调用浏览器插件；

具体来说，在用户想到打开目标页面时，用户可以在浏览器的地址栏中输入目标页面的网址并进行按下回车键，或者，用户可以在浏览器所显示的某一页面中点击目标页面的链接，此时，浏览器就会接收到用于请求打开目标页面的访问请求，浏览器就会立刻自动调用浏览器插件。

步骤A2：浏览器插件基于预设的依赖接口的脚本文件，在目标页面中注册依赖接口；

步骤A3：浏览器插件开始加载第一脚本模块。

其中，依赖接口的脚本文件包含注册依赖接口所需的脚本代码，用于实现依赖接口的功能；依赖接口用于引入脚本模块。

在具体实施过程中，当第一脚本模块和第二脚本模块为JS模块时，为了使得浏览器插件能够实现JS模块化开发，上述依赖接口可以由require接口来实现。在实际应用中，上述依赖接口的脚本文件可以是由开发人员根据在Web前端开发中所需的实现JS模块化的规范，通过JS语言预先编写出能够实现require接口的功能的代码，然后根据该代码所生成的JS文件。

具体来说，require接口可以是指符合JS中的模块规范的、用于加载和使用JS模块的接口。在实际应用中，在Web前端开发中，可以使用AMD(Asynchronous ModuleDefinition，异步模块定义)规范、CMD(Common Module Definition，通用模块定义)规范等JS中的模块规范来实现JS模块化开发。那么，举例来说，为了实现在模块内部异步加载模块，上述require接口可以是指符合AMD规范的接口。

在实际应用中，require接口可以使用require()语句来实现。示例性地，require([module]，callback)，其中，第一个参数[module]，是一个数组，里面的成员就是调用require接口的JS模块所要加载的其它JS模块；第二个参数callback是指在所需要加载的其它JS模块加载完成之后，需要调用的回调接口，以告知调用require接口的JS模块其所依赖的其它JS模块已经加载完成，可以使用其所依赖的其它JS模块所提供的功能。

在具体实施过程中，为了实现注册依赖接口，上述步骤A2可以包括：浏览器插件通过单文件插入接口将预设的依赖接口的脚本文件插入至目标页面中。

具体来说，当依赖接口的脚本文件为一个JS文件时，在浏览器插件被浏览器调用后，浏览器插件就可以通过单文件插入接口将该依赖接口的脚本文件插入到该目标页面中，这样，就会触发该目标页面运行该依赖接口的脚本文件中的脚本代码，实现在目标页面中注册依赖接口。

在实际应用中，上述单文件插入接口可以通过Chrome插件的所提供的chrome.tabs.executeScript()语句来实现。例如，chrome.tabs.executeScript(tabId，details，callback)，其中，第一个参数tabId，是指运行JS文件的页面的标签ID；第二个参数details，是指要插入的JS代码或者要插入的JS文件；第三个参数callback，是指所有JS文件执行后会被调用的回调接口。

S102：当第一脚本模块需要调用第二脚本模块时，浏览器插件调用预先注册的依赖接口传入第二脚本模块的路径信息；

具体来说，由于第一脚本模块依赖了第二脚本模块，为了完成第一脚本模块的加载过程，还需要先加载完成第二脚本模块。这样，当第一脚本模块需要调用第二脚本模块时，浏览器插件就可以通过第一脚本模块来调用依赖接口，接下来，浏览器插件就可以通过该依赖接口来传入所需的第二脚本模块的路径信息。

在本发明另一实施例中，为了能够确定第二脚本模块已经完成加载，以便浏览器插件完成第一脚本模块的加载，上述S102可以包括：浏览器插件调用预先注册的依赖接口传入第二脚本模块的路径信息，并传入第一回调接口，其中，第一回调接口被调用时能够指示已完成第二脚本模块的加载。

这里，第一回调接口被调用时能够指示第二脚本模块已加载完成。在实际应用中，当依赖接口中指定的第一脚本模块所需要调用的第二脚本模块被加载成功后，第一回调接口将会被调用，而在第一回调接口被调用时，所加载的第二脚本模块会以参数形式传入该第一回调接口，从而，在执行第一回调接口的所对应的内部代码时就可以使用第二脚本模块所提供的模块方法。

在具体实施过程中，上述S102可以包括：当浏览器插件的后台端监测到第一脚本模块中预设的触发事件时，浏览器插件的后台端确定第一脚本模块需要调用第二脚本模块；响应触发事件，第一脚本模块调用依赖接口；依赖接口传入第二脚本模块的路径信息，并传入第一回调接口。

其中，触发事件能够指示第一脚本模块需要加载第一依赖模块。

示例性地，上述触发事件可以是指用户在浏览器当前显示的目标页面上进行预设操作，如用户按下页面F2快捷键，也可以是浏览器接收到用于启动某一扩展程序的启动消息，当然，还可以为其它事件。在实际应用中，上述触发事件的具体内容可由本领域技术人员根据具体实施情况预先在第一脚本模块中设置。

在实际应用中，浏览器插件的后台端是指浏览器插件的background端，为浏览器插件中的重要组成部分，浏览器插件的后台端的权限非常高，几乎可以调用所有的浏览器插件的应用接口，例如，浏览器插件的单文件插入接口。浏览器插件的后台端随着浏览器调用浏览器插件而被打开，一直运行在浏览器的后台中，直至浏览器关闭才会被关闭。

那么，在浏览器通过浏览器插件加载第一脚本模块的过程中，浏览器插件的后台端就可以一直进行监控，当浏览器发生了如接收到预设操作或者预设消息等触发事件时，浏览器插件的后台端就会监测到第一脚本模块中预设的触发事件，确定第一脚本模块需要调用第二脚本模块。接下来，浏览器插件的后台端就会触发第一脚本模块去调用依赖接口，然后依赖接口就可以传入该触发事件所对应的第二脚本模块的路径信息，并传入第一回调接口。

S103：浏览器插件基于第二脚本模块的路径信息，加载第二脚本模块；

S104：在第二脚本模块加载完成后，浏览器插件完成第一脚本模块的加载。

具体来说，在执行S102浏览器插件获得了依赖接口所传入的第二脚本模块的路径信息后，浏览器插件就可以基于第二脚本模块的路径信息，获取并加载第二脚本模块，直至第二脚本模块加载完成后，浏览器插件完成第一脚本模块的加载。

在本发明另一实施例中，在上述S103之前，上述方法还可以包括：浏览器插件基于预设的定义接口的脚本文件，在目标页面中注册定义接口，其中，定义接口的脚本文件包含注册定义接口所需的脚本代码，定义接口用于定义脚本模块。

在具体实施过程中，当第一脚本模块和第二脚本模块为JS模块时，为了使得浏览器插件能够实现JS模块化开发，上述定义接口可以由define接口来实现。在实际应用中，上述定义接口的脚本文件可以是由开发人员根据在Web前端开发中所需的实现JS模块化的规范，通过JS语言预先编写出能够实现define接口的功能的代码，然后根据该代码所生成的JS文件。

具体来说，上述define接口可以是指符合JS中的模块规范的、用于声明和定义JS模块的接口。在实际应用中，在Web前端开发中，可以使用AMD(Asynchronous ModuleDefinition，异步模块定义)规范、CMD(Common Module Definition，通用模块定义)规范等JS中的模块规范来实现JS模块化开发。那么，举例来说，为了实现在模块内部异步加载模块，上述define接口可以是指符合AMD规范的接口。

在本发明另一实施例中，上述S103可以包括以下步骤B1～B3：

步骤B1：浏览器插件根据第二脚本模块的路径信息，获取第二脚本模块；

步骤B2：浏览器插件通过单文件插入接口将第二脚本模块插入至目标页面中，开始加载第二脚本模块；

步骤B3：浏览器插件调用定义接口完成第二脚本模块的加载。

具体来说，在浏览器插件获得第二脚本模块的路径信息后，接下来，为了加载完成第二脚本模块，浏览器插件就可以根据第二脚本模块的路径信息，查找到第二脚本模块，并通过单文件插入接口将第二脚本模块插入至目标页面中，这样，就会触发该目标页面运行该第二脚本模块，触发第二脚本模块调用定义接口，这样，浏览器插件就可以通过第二脚本模块调用定义接口完成第二脚本模块的加载。

在本发明其它实施例中，当浏览器插件调用预先注册的依赖接口传入第二脚本模块的路径信息，并传入第一回调接口时，浏览器插件为了完成第二脚本模块的加载，上述步骤B3可以包括：当定义接口获得第二脚本模块的模块方法时，浏览器插件通过定义接口开始运行第二脚本模块的模块方法；在定义接口运行完第二脚本模块的模块方法后，浏览器插件通过定义接口调用第一回调接口。

具体来说，为了加载完成第二脚本模块，在浏览器插件将第二脚本模块插入到目标页面中后，目标页面就会运行该第二脚本模块，触发第二脚本模块调用定义接口，这样，第二脚本模块就可以向定义接口传入第二脚本模块的模块方法。接下来，在定义接口接收到所传入的第二脚本模块的模块方法时，浏览器插件就可以通过定义接口来开始运行该第二脚本模块的模块方法，直至定义接口将该第二脚本模块的模块方法运行完成得到执行结果后，定义接口就会调用第一脚本模块调用依赖接口时所传入的第一回调接口，将该执行结果传入第一回调接口，来向浏览器插件告知第二脚本模块的载入过程已完成，以便完成第一脚本模块的载入过程。

在实际应用中，第一脚本模块可以依赖一个或多个脚本模块，而第一脚本模块所依赖的脚本模块还可以依赖一个或者多个其它脚本模块。举例来说，第一脚本模块所依赖的脚本模块可以为模块1和模块2，而模块1所依赖的脚本模块可以为模块3，模块2所依赖的脚本模块为模块4和模块5，那么，此时，需要在模块4和模块5加载完成后并调用相应的回调接口模块2才能加载完成，在模块3加载完成后并调用相应的回调接口模块1才能加载完成，最后，在模块1和模块2加载完成后并调用相应的回调接口第一脚本模块才能加载完成。

在本发明另一实施例中，当第一脚本模块所依赖的第二脚本模块还依赖了第三脚本模块时，为了能够完成第一脚本模块的加载过程，就需要先加载完第二脚本模块，而为了完成第二脚本模块的加载过程，就需要先加载完第三脚本模块。那么，在具体实施过程中，上述步骤B3可以包括以下步骤C～E：

步骤C：当第二脚本模块需要调用第三脚本模块时，浏览器插件通过定义接口调用依赖接口传入第三脚本模块的路径信息；

在具体实施过程中，为了能够确定第三脚本模块已经完成加载，以便浏览器插件完成第二脚本模块的加载，上述步骤C可以包括：浏览器插件通过定义接口调用依赖接口传入第三脚本模块的路径信息，并传入第二回调接口，其中，第二回调接口被调用时能够指示已完成第三脚本模块的加载。

具体来说，在定义接口运行第二脚本模块的模块方法的过程中，由于第二脚本模块还依赖了第三脚本模块，为了完成第二脚本模块的载入过程，还需要先载入第三脚本模块，此时，定义接口就会调用依赖接口，通过依赖接口来传入所需的第二回调接口和第三脚本模块的路径信息，以便浏览器插件完成第三脚本模块的载入过程。

步骤D：浏览器插件基于第三脚本模块的路径信息，加载第三脚本模块；

步骤E：在第三脚本模块加载完成后，浏览器插件通过定义接口完成第二脚本模块的加载。

在本发明其它实施例中，当浏览器插件调用预先注册的依赖接口传入第三脚本模块的路径信息，并传入第二回调接口时，浏览器插件为了完成第三脚本模块的加载，上述步骤D可以包括以下步骤F1～F4：

步骤F1：浏览器插件根据第三脚本模块的路径信息，获取第三脚本模块；

步骤F2：浏览器插件通过单文件插入接口将第三脚本模块插入至目标页面中，开始加载第三脚本模块；

具体来说，为了载入第三脚本模块，在依赖接口将第二回调接口和第三脚本模块的路径信息传入到定义接口所运行的第二脚本模块后，第二脚本模块就会通过浏览器插件的消息接口将第三脚本模块的路径信息发送至向浏览器插件的后台端。接下来，为了运行第三脚本模块的模块方法，浏览器插件的后台端就可以根据第三脚本模块的路径信息，查找到第三脚本模块，并通过浏览器插件的单文件插入接口将该第三脚本模块插入至目标页面中，就会触发开始加载该第三脚本模块。

步骤F3：当定义接口获得第三脚本模块的模块方法时，浏览器插件通过定义接口开始运行第三脚本模块的模块方法；

步骤F4：在定义接口运行完第三脚本模块的模块方法后，浏览器插件通过定义接口调用第二回调接口。

具体来说，在浏览器插件开始加载第三脚本模块后，就会触发第三脚本模块调用定义接口，这样，第三脚本模块就可以向定义接口传入第三脚本模块的模块方法。接下来，在定义接口接收到所传入的第三脚本模块的模块方法时，定义接口就会运行该第三脚本模块的模块方法，直至将该第三脚本模块的模块方法运行完成得到执行结果后，定义接口就会调用第二脚本模块调用依赖接口时所传入的第二回调接口，将该执行结果传入第二回调接口，来向浏览器插件告知第三脚本模块的载入过程已完成，以便完成第二脚本模块的载入过程。

至此，便完成了基于浏览器插件加载脚本模块的过程。

由上述内容可知，本发明实施例所提供的基于浏览器插件加载脚本模块的方法，在浏览器调用安装在浏览器内的浏览器插件后，浏览器插件就会开始加载第一脚本模块；接下来，在加载第一脚本模块的过程中，当第一脚本模块需要调用第二脚本模块时，浏览器插件就会调用预先注册的依赖接口传入该第二脚本模块的路径信息，然后，浏览器插件就可以基于第二脚本模块的路径信息，开始加载第二脚本模块。最后，在第二脚本模块加载完成后，浏览器插件完成第一脚本模块的加载。这样，当浏览器插件加载依赖了第二脚本模块的第一脚本模块时，能够通过预先注册的依赖接口传入该第二脚本模块的路径信息，来实现在加载完第二脚本模块后，完成第一脚本模块的加载过程。从而，使得浏览器插件也能够支持脚本模块载入，无需将实现浏览器插件功能的代码事先写死在插件代码中，能将代码分离成独立的多个模块，方便代码重用，降低了维护成本，提高开发效率。

下面以浏览器插件由Chrome插件来实现、依赖接口由require接口来实现、定义接口由define接口实现、第一脚本模块由第一JS模块来实现、第二脚本模块以第二JS模块来实现、以接收到用于打开目标页面的访问请求来触发浏览器调用Chrome插件为例，对上述基于浏览器插件加载脚本模块的方法的步骤进行详细说明。

基于前述实施例，本发明实施例提供一种基于Chrome插件加载JS模块的方法，该基于Chrome插件加载JS模块的方法可以包括以下步骤G1～G9：

G1：浏览器接收用于请求打开目标页面的访问请求；

具体来说，在用户想到打开目标页面时，用户可以在浏览器的地址栏中输入目标页面的网址并进行按下回车键，或者，用户可以在浏览器所显示的某一页面中点击目标页面的链接，此时，浏览器就会接收到用于请求打开目标页面的访问请求，其中，该访问请求中还可以携带所要打开的目标页面的网址。

G2：浏览器响应访问请求，调用Chrome插件；

具体来说，在浏览器接收到用于请求打开目标页面的访问请求后，浏览器就可以调用Chrome插件，以便在打开目标页面之前，浏览器先通过该Chrome插件的后台端在该目标页面中注册require接口。

在实际应用中，Chrome插件是指除了可以运行在Chrome浏览器的插件之外，还可以运行在所有具有Webkit内核的浏览器的插件，比如运行在Safari浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等的插件。

在实际应用中，Chrome插件的后台端是指Chrome插件的background端，为Chrome插件中的重要组成部分，Chrome插件的后台端的权限非常高，几乎可以调用所有的Chrome插件的应用接口，例如，Chrome插件的单文件插入接口。Chrome插件的后台端随着浏览器调用Chrome插件而被打开，一直运行在浏览器的后台中，直至浏览器关闭才会被关闭。

G3：Chrome插件的后台端在目标页面中注册require接口；

具体来说，在浏览器调用安装在浏览器内的Chrome插件后，Chrome插件的后台端就可以通过Chrome插件的单文件插入接口将预设的依赖接口的接口文件插入至目标页面中，以在目标页面中注册require接口，从而，在Chrome插件的后台端加载预设的第一JS模块的过程中，当该第一JS模块需要调用其所依赖的第二JS模块时，第一JS模块就能够使用require接口来引入第二JS模块。

在实际应用中，上述require接口可以是指符合JS中的模块规范的、用于加载和使用JS模块的接口。举例来说，为了实现在模块内部异步加载模块，上述require接口可以是指符合AMD规范的接口。

G4：Chrome插件开始加载第一JS模块；

G5：当第一JS模块需要调用第二JS模块时，Chrome插件的后台端通过第一JS模块调用require接口，并通过require接口传入第一回调接口和第二JS模块的路径信息；

G6：Chrome插件在目标页面中注册define接口，并基于第二JS模块的路径信息，将第二JS模块插入至目标页面中；

在具体实施过程中，上述步骤G6可以包括：第一JS模块通过Chrome插件的消息接口向Chrome插件的后台端发送载入消息；Chrome插件的后台端接收第一JS模块发送的载入消息；Chrome插件的后台端通过Chrome插件的单文件插入接口将预设的定义接口的脚本文件插入至目标页面中；Chrome插件的后台端根据第二JS模块的路径信息，获取第二JS模块；Chrome插件的后台端通过Chrome插件的单文件插入接口将第二JS模块插入至目标页面中。

其中，载入消息携带第二JS模块的路径信息，用于指示载入第二JS模块。

具体来说，为了载入第二JS模块，在require接口将第一回调接口和第二JS模块的路径信息传入到Chrome插件所运行的第一JS模块后，第一JS模块就会通过Chrome插件的消息接口将载入消息发送至向Chrome插件的后台端，就会触发Chrome插件的后台端在目标页面中注册define接口，而且在Chrome插件的后台端接收到载入消息后，Chrome插件的后台端的就可以获得第二JS模块的路径信息，接下来，为了运行第二JS模块的模块方法，Chrome插件的后台端就可以根据第二JS模块的路径信息，查找到第二JS模块，并通过Chrome插件的单文件插入接口将第二JS模块插入至目标页面中。

G7：Chrome插件通过第二JS模块调用define接口开始运行第二JS模块的模块方法；

G8：在define接口运行完第二JS模块的模块方法后，Chrome插件通过define接口调用第一回调接口，表明第二JS模块已加载完成。

G9：Chrome插件完成第一JS模块的加载。

具体来说，为了加载完成第二JS模块，在Chrome插件的后台端将第二JS模块插入到目标页面中后，目标页面就会运行该第二JS模块，触发第二JS模块调用define接口，这样，第二JS模块就可以向define接口传入第二JS模块的模块方法。接下来，在define接口接收到所传入的第二JS模块的模块方法时，define接口就会开始运行该第二JS模块的模块方法，直至将该第二JS模块的模块方法运行完成得到执行结果后，define接口就会调用第一JS模块调用require接口时所传入的第一回调接口，将该执行结果传入第一回调接口，来向Chrome插件告知第二JS模块的载入过程已完成，以便Chrome插件完成第一JS模块的载入过程。

至此，便完成了基于Chrome插件加载JS模块的过程。

由上述内容可知，本发明实施例所提供的基于Chrome插件加载JS模块的方法，在浏览器调用安装在浏览器内的Chrome插件后，Chrome插件就会在目标页面中注册require接口，并加载预设的第一JS模块，其中，第一JS模块依赖第二JS模块；接下来，当第一JS模块需要调用第二JS模块时，Chrome插件通过第一JS模块就可以调用require接口传入第一回调接口和第二JS模块的路径信息，其中，第一回调接口被调用时能够指示第一JS模块已加载完成；然后，Chrome插件还会在目标页面中注册define接口，并基于第二JS模块的路径信息，将第二JS模块插入至目标页面中；最后，Chrome插件通过第二JS模块调用define接口运行第二JS模块的模块方法，并在第二JS模块的模块方法运行完成后调用第一回调接口。这样，能够通过调用require接口和define接口来实现在加载完第二JS模块后，完成了第一JS模块的加载。从而，使得Chrome插件也能够支持JS模块载入，无需将实现功能的代码事先写死在插件代码中，能将功能代码分离成独立的多个模块，方便代码重用，降低了维护成本，提高开发维护效率。

基于同一发明构思，作为对上述方法的实现，本发明实施例提供了一种基于浏览器插件加载脚本模块的装置，该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本发明实施例中的装置能够对应实现前述方法实施例中的全部内容。

图2为本发明实施例中的基于浏览器插件加载脚本模块的装置的结构示意图，参见图2所示，该装置20可以包括：浏览器201和安装在浏览器内的浏览器插件202，其中，浏览器201，用于调用浏览器插件开始加载第一脚本模块；浏览器插件202，用于当第一脚本模块需要调用第二脚本模块时，调用预先注册的依赖接口传入第二脚本模块的路径信息；基于第二脚本模块的路径信息，加载第二脚本模块；在第二脚本模块加载完成后，完成第一脚本模块的加载。

在本发明实施例中，浏览器，用于调用浏览器插件；浏览器插件，用于基于预设的依赖接口的脚本文件，在目标页面中注册依赖接口，其中，依赖接口的脚本文件包含注册依赖接口所需的脚本代码，依赖接口用于引入脚本模块；开始加载第一脚本模块。

在本发明实施例中，浏览器插件，还用于基于预设的定义接口的脚本文件，在目标页面中注册定义接口，其中，定义接口的脚本文件包含注册定义接口所需的脚本代码，定义接口用于定义脚本模块。

在本发明实施例中，浏览器插件，具体用于根据第二脚本模块的路径信息，获取第二脚本模块；通过单文件插入接口将第二脚本模块插入至目标页面中，开始加载第二脚本模块；调用定义接口完成第二脚本模块的加载。

在本发明实施例中，浏览器插件，具体用于调用预先注册的依赖接口传入第二脚本模块的路径信息，并传入第一回调接口，其中，第一回调接口被调用时能够指示已完成第二脚本模块的加载；还具体当定义接口获得第二脚本模块的模块方法时，通过定义接口开始运行第二脚本模块的模块方法；在定义接口运行完第二脚本模块的模块方法后，通过定义接口调用第一回调接口。

在本发明实施例中，浏览器插件，具体用于当第二脚本模块需要调用第三脚本模块时，通过定义接口调用依赖接口传入第三脚本模块的路径信息；基于第三脚本模块的路径信息，加载第三脚本模块；在第三脚本模块加载完成后，通过定义接口完成第二脚本模块的加载。

在本发明实施例中，浏览器插件，具体用于通过定义接口调用依赖接口传入第三脚本模块的路径信息，并传入第二回调接口，其中，第二回调接口被调用时能够指示已完成第三脚本模块的加载；浏览器插件，还具体用于根据第三脚本模块的路径信息，获取第三脚本模块；浏览器插件通过单文件插入接口将第三脚本模块插入至目标页面中，开始加载第三脚本模块；当定义接口获得第三脚本模块的模块方法时，浏览器插件通过定义接口开始运行第三脚本模块的模块方法；在定义接口运行完第三脚本模块的模块方法后，浏览器插件通过定义接口调用第二回调接口。

由于本发明实施例所介绍的基于浏览器插件加载脚本模块的装置为可以执行本发明实施例中的基于浏览器插件加载脚本模块的方法的装置，故而基于本发明实施例中所介绍的基于浏览器插件加载脚本模块的方法，本领域所属技术人员能够了解本发明实施例的基于浏览器插件加载脚本模块的装置的具体实施方式以及其各种变化形式，所以在此对于该基于浏览器插件加载脚本模块的装置如何实现本发明实施例中的基于浏览器插件加载脚本模块的方法不再详细介绍。只要本领域所属技术人员实施本发明实施例中基于浏览器插件加载脚本模块的方法所采用的装置，都属于本申请所欲保护的范围。

在实际应用中，该基于浏览器插件加载脚本模块的装置可应用于电子设备中。在实际应用中，该电子设备可以以各种形式来实施。例如，本发明中描述的电子设备可以包括诸如手机、平板电脑、笔记本电脑、电子书阅读器、掌上电脑、个人数字助理(PersonalDigital Assistant，PDA)、导航装置、可穿戴设备等移动终端，以及诸如数字TV、台式计算机等固定终端。这里，本发明实施例不做具体限定。

基于同一发明构思，本发明实施例提供一种电子设备。图3为本发明实施例中的电子设备的结构示意图，参见图3所示，该电子设备30包括：至少一个处理器31；以及与处理器31连接的至少一个存储器32、总线33；其中，处理器31、存储器32通过总线33完成相互间的通信；处理器31用于调用存储器32中的程序指令，以执行上述一个或多个实施例中的基于浏览器插件加载脚本模块的方法的步骤。

本发明实施例还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行上述一个或多个实施例中的基于浏览器插件加载脚本模块的方法。

上述处理器可由中央处理器(Central Processing Unit，CPU)、微处理器(MicroProcessor Unit，MPU)、数字信号处理器(Digital Signal Processor，DSP)、或现场可编程门阵列(Field Programmable Gate Array，FPGA)等实现。存储器可能包括计算机可读介质中的非永久性存储器，随机存储器(Random Access Memory，RAM)和/或非易失性内存等形式，如只读存储器(Read Only Memory，ROM)或闪存(Flash RAM)，存储器包括至少一个存储芯片。

基于同一发明构思，本发明实施例提供一种计算机可读存储介质，上述计算机可读存储介质包括存储的程序，其中，在程序运行时控制存储介质所在设备执行上述一个或多个实施例中的基于浏览器插件加载脚本模块的方法的步骤。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、只读光盘(Compact Disc Read-Only Memory，CD-ROM)、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，RAM和/或非易失性内存等形式，如ROM或Flash RAM。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机可读存储介质可以是ROM、可编程只读存储器(Programmable Read-Only Memory，PROM)、可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM)、电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、磁性随机存取存储器(Ferromagnetic Random Access Memory，FRAM)、快闪存储器(Flash Memory)、磁表面存储器、光盘、或只读光盘(Compact Disc Read-Only Memory，CD-ROM)等存储器；也可以是快闪记忆体或其他内存技术、CD-ROM、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息；还可以是包括上述存储器之一或任意组合的各种电子设备，如移动电话、计算机、平板设备、个人数字助理等。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本发明的实施例可提供为方法、系统或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本发明的实施例而已，并不用于限制本发明。对于本领域技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。

Claims (10)

1.一种基于浏览器插件加载脚本模块的方法，其特征在于，所述方法包括：

浏览器调用浏览器插件开始加载第一脚本模块；

当所述第一脚本模块需要调用第二脚本模块时，所述浏览器插件调用预先注册的依赖接口传入所述第二脚本模块的路径信息；

所述浏览器插件基于所述第二脚本模块的路径信息，加载所述第二脚本模块；

在所述第二脚本模块加载完成后，所述浏览器插件完成所述第一脚本模块的加载。

2.根据权利要求1所述的方法，其特征在于，所述浏览器调用浏览器插件开始加载第一脚本模块，包括：

所述浏览器调用浏览器插件；

所述浏览器插件基于预设的依赖接口的脚本文件，在目标页面中注册依赖接口，其中，所述依赖接口的脚本文件包含注册所述依赖接口所需的脚本代码，所述依赖接口用于引入脚本模块；

所述浏览器插件开始加载第一脚本模块。

3.根据权利要求1或2所述的方法，其特征在于，在所述浏览器插件基于所述第二脚本模块的路径信息，加载所述第二脚本模块之前，所述方法还包括：

所述浏览器插件基于预设的定义接口的脚本文件，在目标页面中注册定义接口，其中，所述定义接口的脚本文件包含注册所述定义接口所需的脚本代码，所述定义接口用于定义脚本模块。

4.根据权利要求3所述的方法，其特征在于，所述浏览器插件基于所述第二脚本模块的路径信息，加载所述第二脚本模块，包括：

所述浏览器插件根据所述第二脚本模块的路径信息，获取所述第二脚本模块；

所述浏览器插件通过单文件插入接口将所述第二脚本模块插入至目标页面中，开始加载所述第二脚本模块；

所述浏览器插件调用所述定义接口完成所述第二脚本模块的加载。

5.根据权利要求4所述的方法，其特征在于，所述浏览器插件调用预先注册的依赖接口传入所述第二脚本模块的路径信息，包括：所述浏览器插件调用预先注册的依赖接口传入所述第二脚本模块的路径信息，并传入第一回调接口，其中，所述第一回调接口被调用时能够指示已完成所述第二脚本模块的加载；

所述浏览器插件调用所述定义接口完成所述第二脚本模块的加载，包括：当所述定义接口获得所述第二脚本模块的模块方法时，所述浏览器插件通过所述定义接口开始运行所述第二脚本模块的模块方法；在所述定义接口运行完所述第二脚本模块的模块方法后，所述浏览器插件通过所述定义接口调用所述第一回调接口。

6.根据权利要求4或5所述的方法，其特征在于，所述浏览器插件调用所述定义接口完成所述第二脚本模块的加载，包括：

当所述第二脚本模块需要调用第三脚本模块时，所述浏览器插件通过所述定义接口调用所述依赖接口传入所述第三脚本模块的路径信息；

所述浏览器插件基于所述第三脚本模块的路径信息，加载所述第三脚本模块；

在所述第三脚本模块加载完成后，所述浏览器插件通过所述定义接口完成所述第二脚本模块的加载。

7.根据权利要求6所述的方法，其特征在于，所述浏览器插件通过所述定义接口调用所述依赖接口传入所述第三脚本模块的路径信息，包括：所述浏览器插件通过所述定义接口调用所述依赖接口传入所述第三脚本模块的路径信息，并传入第二回调接口，其中，所述第二回调接口被调用时能够指示已完成所述第三脚本模块的加载；

所述浏览器插件基于所述第三脚本模块的路径信息，加载所述第三脚本模块，包括：所述浏览器插件根据所述第三脚本模块的路径信息，获取所述第三脚本模块；所述浏览器插件通过单文件插入接口将所述第三脚本模块插入至目标页面中，开始加载所述第三脚本模块；当所述定义接口获得所述第三脚本模块的模块方法时，所述浏览器插件通过所述定义接口开始运行所述第三脚本模块的模块方法；在所述定义接口运行完所述第三脚本模块的模块方法后，所述浏览器插件通过所述定义接口调用所述第二回调接口。

8.一种基于浏览器插件加载脚本模块的装置，其特征在于，所述装置包括：浏览器和安装在所述浏览器内的浏览器插件，其中，

所述浏览器，用于调用浏览器插件开始加载第一脚本模块；

所述浏览器插件，用于当所述第一脚本模块需要调用第二脚本模块时，调用预先注册的依赖接口传入所述第二脚本模块的路径信息；基于所述第二脚本模块的路径信息，加载所述第二脚本模块；在所述第二脚本模块加载完成后，完成所述第一脚本模块的加载。

9.一种计算机可读存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行如权利要求1至7任一项所述的基于浏览器插件加载脚本模块的方法的步骤。

10.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；

以及与所述处理器连接的至少一个存储器、总线；

其中，所述处理器、存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行如权利要求1至7任一项所述的基于浏览器插件加载脚本模块的方法的步骤。

Images