Menu
I've wrote a Chrome Extension. My background.js file is quite large, so I want to split it to smaller parts and load specified methods when required (some kind of lazy-loading).
I've done this with Firefox:
// ( call for load specified lib ) var libPath = redExt.basePath + 'content/redExt/lib/' + redExt.browser + '/' + libName + '.js'; var service = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader); service.loadSubScript("chrome://" + libPath); // ( executing loaded file ) Is there any possiblity to do it similar way in Webkit-based browsers? I've found solutions for how to inject multiple JS files into matching pages (using manifest.json) but cannot find way to include JS file just for extension.
695
You can write your JS in separate files, but when it comes to deploying, it's more efficient to minify them all into a single file. For each script you load in your browser, you make a round-trip to the server, so it makes sense to minimize those.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
Answer: Use the export and import Statement Since ECMAScript 6 (or ES6) you can use the export or import statement in a JavaScript file to export or import variables, functions, classes or any other entity to/from other JS files.
Go to chrome://extensions/ and enable the developer mode. Then, click on the Load unpacked button and choose the directory where you have placed the files. And that’s it! You have successfully created your first chrome extension. Clicking on the extension icon will pop up the contents of popup.html.
The concept was originally introduced with the initial launch of Chrome, providing isolation for browser tabs. An extension may run in a web page with code similar to the example below. alert(greeting + button.person_name + ".")
They can also access the URL of an extension's file with chrome.runtime.getURL () and use the result the same as other URLs. Additionally, content scripts can access the following chrome APIs directly: Content scripts are unable to access other APIs directly.
These files may contain data or configuration information to help the extension function. This short guide will show you how you can set up your Chrome extension to read files. Firstly, you must add the file paths to the web_accessible_resources property in the manifest.json file.
UPDATE : This solution works only if you are using manifest V2.
You can also do this the extremely easy way that is described here: https://developer.chrome.com/extensions/background_pages#manifest
{ "name": "My extension", ... "background": { "scripts": [ "lib/fileone.js", "lib/filetwo.js", "background.js" ] }, ... } You won't be doing lazy loading, but it does allow you to break your code up into multiple files and specify the order in which they are loaded onto the background page.
79
If you want to load a javascript file in the context of your background page and want to avoid using eval, you can just add a script tag to your background page's DOM. For instance, this works if your files are present in the lib folder of your extension:
function loadScript(scriptName, callback) { var scriptEl = document.createElement('script'); scriptEl.src = chrome.extension.getURL('lib/' + scriptName + '.js'); scriptEl.addEventListener('load', callback, false); document.head.appendChild(scriptEl); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
