# 创建首个浏览器集成插件示例

## 1.环境准备

- 一台安装了LINUX系统的机器。
- 一个支持NPAPI的浏览器（参见 [浏览器应用集成嵌入WPS概述](/app-integration-dev/wps365/client/wpsoffice/wps-integration-mode/browser-app-integration-embedded-in-wps-guide/overview) ） 。

## 2.Demo代码

源码如下：

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>wps二次开发演示</title>
  </head>
  <body>
    <object
      type="application/x-wps"
      width="1024"
      height="768"
      id="wps"
    ></object>
    <!--通过类型 “application/x-wps” 来加载WPS浏览器NPAPI插件，并传递宽高值-->
    <script type="text/javascript">
      //来获取wps的插件对象
      var obj = document.getElementById("wps");
      //获取WPS对象树的根节点，后续功能调用都是根据 Application 逐步得到的
      var Application = obj.Application;
      //创建一个新的空白文档
      Application.createDocument("wps");
      //获取文档内容区域
      var range = Application.ActiveDocument.Content;
      //在文档内容区域插入一个3行5列的表格，设置表格显示边框
      Application.ActiveDocument.Tables.Add(range, 3, 5).Borders.Enable = 1;
    </script>
  </body>
</html>
```

请将上述示例代码保存到html文件中，**在LINUX下使用支持的浏览器打开此html文件** ，完整的支持信息请查看[浏览器应用集成嵌入WPS概述](/app-integration-dev/wps365/client/wpsoffice/wps-integration-mode/browser-app-integration-embedded-in-wps-guide/overview) 中“插件对浏览器的要求”。

## 3.效果如下图所示

![](https://cloudcdn.qwps.cn/open/_img/b07d9f279d.jpg)

## 4.浏览器集成插件Demo

[请点击查看更多demo链接](https://gitee.com/zouyf/wps/tree/master/np-example/browser-integration-wps)
