The preparation of developing Plug-in

You can choose a simple file mode, such as a simple project composed of js+html+css, or use libraries such as jq, which is completely free. It is strongly recommended to use vue or react to create a project, so that you can add more scripts and other plug-ins to the project to do a lot of things. Of course, if you are not bothered, you can do a set of engineering yourself. So if you only care about business, it is more appropriate to follow the above recommendation.

No matter what kind of plug-in it is, it is strongly dependent on two js files, namely: foxit.js and external.js. Using simple js+html+css is not so flexible.

How to quote these two files?

First of all, we need to know that external.js does not need to be referenced manually. It will be automatically referenced and loaded. The principle is that its dynamic import code is in foxit.js, and foxit.js is successfully loaded. It will automatically load external.js.

How to reference foxit.js

The usual practice is to dynamically append, such as the following code example:

let foxitJsName = '';

if (process.env.NODE_ENV === 'development') {

    foxitJsName = 'foxit.js';

} else if (process.env.NODE_ENV === 'testing') {

    foxitJsName = 'foxit.umd.min.js';

} else if (process.env.NODE_ENV === 'production') {

    foxitJsName = 'foxit.umd.min.js';

}

const foxitSrc = process.env.VUE_APP_CONTEXT_PATH + '/' + foxitJsName;

const script1= document.createElement('script');

script1.type = 'text/javascript';

script1.src = foxitSrc;

document.body.appendChild(script1);

VUE_APP_CONTEXT_PATH is the environment variable of the vue project

Development environment：http://127.0.0.1:10001 (Started locally, follow the changes of the project you started)

Production environment：https://pdfonline.foxit.com/pluginsdk

Note: It is not recommended to use the append method to load foxit.js here. This solution may cause external.js to fail to load. The reason is that online dynamically inserts this file using postMessage, and foxit.js executes appendChild only after receiving postMessage. At this time, maybe foxit.js has not listened to this message event

Recommended way：

<script type="text/javascript" src="<%= htmlWebpackPlugin.options.FOXIT_URL %>"></script>

Webpack configuration file or vue.config.js file

let foxitJsName = '';

if (process.env.NODE_ENV === 'development') {

    foxitJsName = 'foxit.js';

} else if (process.env.NODE_ENV === 'testing') {

    foxitJsName = 'foxit.umd.min.js';

} else if (process.env.NODE_ENV === 'production') {

    foxitJsName = 'foxit.umd.min.js';

}

const FOXIT_SRC = process.env.VUE_APP_CONTEXT_PATH + '/' + foxitJsName;

args[0].FOXIT_URL = FOXIT_SRC;

return args;

Congratulations！ The preparations required for the plug-in have been completed here, and then you can happily develop your plug-in.