feat: 0.0.1

README.cn.md

@@ -0,0 +1,134 @@
+
+<h1><a href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
+
+<h2>🚀 一行代码搞定禁用web开发者工具 </h2>
+
+----
+
+<p align="">
+    <a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
+    <a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
+</p> 
+
+<p align="">
+    <a href="https://www.npmjs.com/package/disable-devtool"><img src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
+    <a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
+    <a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
+    <a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
+    <a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
+    <a href="https://github.com/theajack/disable-devtool/issues"><img src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
+    <a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
+</p>
+
+**[English](https://github.com/theajack/disable-devtool/blob/master/helper/README.en.md) | [在线试用/文档](https://theajack.gitee.io/disable-devtool) | [Gitee](https://gitee.com/theajack/disable-devtool)**
+
+## 1. 快速使用
+
+### 1.1 npm 引用
+
+```
+npm i disable-devtool
+```
+
+```js
+import disableDevtool from 'disable-devtool';
+
+disableDevtool();
+```
+
+### 1.2 script属性配置
+
+```html
+<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+```
+
+## 2.功能
+
+disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’
+
+该库有以下特性:
+
+1. 支持可配置是否禁用右键菜单
+2. 禁用 f12 和 ctrl+shift+i 快捷键
+3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
+4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
+5. 支持几乎所有浏览器
+6. 高度可配置
+7. 使用极简、体积小巧 (仅6kb)
+8. 支持npm引用和script标签引用(属性配置)
+
+## 3. 使用
+
+### 3.1 npm使用时的配置参数
+
+安装 disable-devtool
+
+```
+npm i disable-devtool
+```
+
+```js
+import disableDevtool from 'disable-devtool';
+
+disableDevtool(options);
+```
+
+options中的参数与说明如下：
+
+```ts
+declare interface optionStatic {
+    md5?: string; // 绕过禁用的md5值，详情见3.2，默认不启用绕过禁用
+    url?: string; // 关闭页面失败时的跳转页面，默认值为localhost
+    tkName?: string; // 绕过禁用时的url参数名称，默认为 ddtk
+    ondevtoolopen?(): void; // 开发者面板打开的回调，启用时url参数无效
+    debugDelay?: number; // debug模式时的延迟 默认200ms
+    interval?: number; // 定时器的时间间隔 默认200ms
+    disableMenu?: boolean; // 是否禁用右键菜单 默认为true
+}
+```
+
+### 3.2 md5 与 tk 绕过禁用
+
+该库中使用 key 与 md5 配合的方式使得开发者可以在线上绕过禁用。
+
+流程如下：
+
+先指定一个 key a（该值不要记录在代码中），使用 md5 加密得到一个值 b，将b作为 md5 参数传入，开发者在访问 url 的时候只需要带上url参数 ddtk=a，便可以绕过禁用。
+
+disableDevtool对象暴露了 md5 方法，可供开发者加密时使用：
+
+```js
+disableDevtool.md5('xxx');
+```
+
+### 3.2 script使用属性配置
+
+```html
+<script 
+    id='disable-devtool'
+    src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
+    md5='xxx'
+    url='xxx'
+    tk-name='xxx'
+    debug-delay='xxx'
+    interval='xxx'
+    disable-menu='xxx'
+></script>
+```
+
+注：
+
+1. 属性配置时必须要带上 `id='disable-devtool'` 属性
+2. 属性配置都是可选的，字段与3.1中一致，区别是将驼峰形式改成横线分割
+3. 该script标签建议放在body最底部
+
+### 3.3 script不使用属性配置
+
+```html
+<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+<script>
+    DisableDevtool({
+        // 参数与3.1中一致
+    })
+</script>
+```

README.md

@@ -1,63 +1,133 @@
-### This is a project build with [EBuild-Cli](https://github.com/theajack/ebuild-cli)
+<h1><a href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
 
-### Install dependencies
+<h2>🚀 Disable web developer tools with one line </h2>
+
+----
+
+<p align="">
+    <a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
+    <a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
+</p> 
+
+<p align="">
+    <a href="https://www.npmjs.com/package/disable-devtool"><img src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
+    <a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
+    <a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
+    <a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
+    <a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
+    <a href="https://github.com/theajack/disable-devtool/issues"><img src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
+    <a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
+</p>
+
+**[中文](https://github.com/theajack/disable-devtool/blob/master/README.cn.md) | [online trial/document](https://theajack.gitee.io/disable-devtool) | [Gitee](https://gitee.com/theajack/disable-devtool)**
+
+## 1. Quick use
+
+### 1.1 npm reference
 
 ```
-npm install
+npm i disable-devtool
 ```
 
-use taobao repository
-
-```
-npm install --registry https://registry.npm.taobao.org
-```
-
-### Init git repository
-
-```
-git init
-git add README.md
-git commit -m "first commit"
-git remote add origin {Your remote git repository address}
-git push -u origin master
-```
-
-### Commond
-
-```
-npm run dev
-npm run build
-npm run publish
-npm run lint
-```
-
-### ebuild.config.js
-
 ```js
-module.exports = {
+import disableDevtool from 'disable-devtool';
-    'tranToEs5InNpm': true, // wether use babel
+
-    'packageFiles': [
+disableDevtool();
-        './package.json'
-        // config which package.json files need to modify version
-        // '../npm/package.json', // this is an example
-    ],
-    'versioJsEs6Module': true, // use es6(export default) or require(module.exports=)
-    'versioJsFiles': [
-        // config which version.js files need to modify version
-        // '../npm/version.js', // this is an example
-    ],
-    'name': '',
-    'version': '0.0.1',
-    'npmExternals': {
-        // example
-        // 'md5': 'md5'
-    },
-    'npmPaths': [
-        'npm'
-    ]
-};
 ```
 
-### Vscode plugin
+### 1.2 script attribute configuration
 
-Install 'ESLint' plugin
+```html
+<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+```
+
+## 2. Function
+
+disable-devtool can disable all the methods that can enter the developer tools to prevent ‘code handling’ through the developer tools
+
+The library has the following features:
+
+1. Support configurable whether to disable the right-click menu
+2. Disable f12 and ctrl+shift+i shortcuts
+3. Support recognition to open the developer tools from the browser menu bar and close the current page
+4. Developers can bypass the disablement (use tk and md5 encryption for url parameters)
+5. Support almost all browsers
+6. Highly configurable
+7. Minimal use, small size (only 6kb)
+8. Support npm reference and script tag reference (attribute configuration)
+
+## 3. Use
+
+### 3.1 Configuration parameters when using npm
+
+Install disable-devtool
+
+```
+npm i disable-devtool
+```
+
+```js
+import disableDevtool from 'disable-devtool';
+
+disableDevtool(options);
+```
+
+The parameters and descriptions in options are as follows:
+
+```ts
+declare interface optionStatic {
+    md5?: string; // Bypass the disabled md5 value, see 3.2 for details, the bypass disable is not enabled by default
+    url?: string; // Jump to the page when closing the page fails, the default value is localhost
+    tkName?: string; // Bypass the url parameter name when disabled, the default is ddtk
+    ondevtoolopen?(): void; // Callback for opening the developer panel, the url parameter is invalid when enabled
+    debugDelay?: number; // The delay in debug mode is 200ms by default
+    interval?: number; // Timer interval is 200ms by default
+    disableMenu?: boolean; // Whether to disable the right-click menu The default is true
+}
+```
+
+### 3.2 md5 and tk bypass disable
+
+The combination of key and md5 in the library allows developers to bypass the disabling online.
+
+The process is as follows:
+
+First specify a key a (the value should not be recorded in the code), use md5 encryption to obtain a value b, and pass in b as the md5 parameter. Developers only need to bring the url parameter ddtk=a when accessing the url. Bypass disabled.
+
+The disableDevtool object exposes the md5 method, which can be used by developers when encrypting:
+
+```js
+disableDevtool.md5('xxx');
+```
+
+### 3.2 script uses attribute configuration
+
+```html
+<script
+    id='disable-devtool'
+    src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
+    md5='xxx'
+    url='xxx'
+    tk-name='xxx'
+    debug-delay='xxx'
+    interval='xxx'
+    disable-menu='xxx'
+></script>
+```
+
+Note:
+
+1. You must bring the id='disable-devtool'` attribute when configuring attributes
+2. Attribute configuration is optional, the fields are the same as in 3.1, the difference is that the hump form is changed to horizontal line division
+3. The script tag is recommended to be placed at the bottom of the body
+
+### 3.3 script does not use attribute configuration
+
+```html
+<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+<script>
+    DisableDevtool({
+        // The parameters are the same as in 3.1
+    })
+</script>
+```

index.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>一行代码搞定禁用web开发者工具</title>
+    <style>
+        code{
+            white-space: pre;
+            font-family: Consolas, "Courier New", monospace;
+            color: #fff;
+            background-color: #444;
+            display: block;
+            overflow-x: auto;
+            border-radius: 5px;
+            padding: 10px;
+        }
+        body{
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1><a style='color:#222' href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
+
+    <h2>🚀 Disable web developer tools with one line </h2>
+
+
+    <p>
+        <a href="https://www.github.com/theajack/disable-devtool"><img
+                src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
+        <a href="https://theajack.gitee.io"><img
+                src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
+    </p>
+
+    <p>
+        <a href="https://www.npmjs.com/package/disable-devtool"><img
+                src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
+        <a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img
+                src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
+        <a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img
+                src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
+        <a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img
+                src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
+        <a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img
+                src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
+        <a href="https://github.com/theajack/disable-devtool/issues"><img
+                src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
+        <a href="https://www.github.com/theajack/disable-devtool"><img
+                src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
+    </p>
+
+    <p><strong><a href="https://github.com/theajack/disable-devtool/blob/master/README.cn.md">中文</a> | <a
+                href="https://theajack.gitee.io/disable-devtool">online trial/document</a> | <a
+                href="https://gitee.com/theajack/disable-devtool">Gitee</a></strong></p>
+
+    <h2>1. Quick use</h2>
+
+    <h3>1.1 npm reference</h3>
+
+    <p><code>npm i disable-devtool</code></p>
+
+    <p>
+        <code>import disableDevtool from&#39;disable-devtool&#39;;
+disableDevtool();</code>
+    </p>
+
+    <h3>1.2 script attribute configuration</h3>
+
+    <p><code>&lt;script id=&#39;disable-devtool&#39; src=&#39;https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js&#39;&gt;&lt;/script&gt;</code></p>
+
+    <h2>2. Function</h2>
+
+    <p>disable-devtool can disable all the methods that can enter the developer tools to prevent ‘code handling’ through
+        the developer tools</p>
+
+    <p>The library has the following features:</p>
+
+    <ol>
+        <li>Support configurable whether to disable the right-click menu</li>
+        <li>Disable f12 and ctrl+shift+i shortcuts</li>
+        <li>Support recognition to open the developer tools from the browser menu bar and close the current page</li>
+        <li>Developers can bypass the disablement (use tk and md5 encryption for url parameters)</li>
+        <li>Support almost all browsers</li>
+        <li>Highly configurable</li>
+        <li>Minimal use, small size (only 6kb)</li>
+        <li>Support npm reference and script tag reference (attribute configuration)</li>
+    </ol>
+
+    <h2>3. Use</h2>
+
+    <h3>3.1 Configuration parameters when using npm</h3>
+
+    <p>Install disable-devtool</p>
+
+    <p><code>npm i disable-devtool</code></p>
+
+    <p><code>import disableDevtool from&#39;disable-devtool&#39;;
+disableDevtool(options);</code></p>
+
+    <p>The parameters and descriptions in options are as follows:</p>
+
+    <p><code>declare interface optionStatic {
+    md5?: string; // Bypass the disabled md5 value, see 3.2 for details, the bypass disable is not enabled by default
+    url?: string; // Jump to the page when closing the page fails, the default value is localhost
+    tkName?: string; // Bypass the url parameter name when disabled, the default is ddtk
+    ondevtoolopen?(): void; // Callback for opening the developer panel, the url parameter is invalid when enabled
+    debugDelay?: number; // The delay in debug mode is 200ms by default
+    interval?: number; // Timer interval is 200ms by default
+    disableMenu?: boolean; // Whether to disable the right-click menu The default is true
+}</code></p>
+
+    <h3>3.2 md5 and tk bypass disable</h3>
+
+    <p>The combination of key and md5 in the library allows developers to bypass the disabling online.</p>
+
+    <p>The process is as follows:</p>
+
+    <p>First specify a key a (the value should not be recorded in the code), use md5 encryption to obtain a value b, and
+        pass in b as the md5 parameter. Developers only need to bring the url parameter ddtk=a when accessing the url.
+        Bypass disabled.</p>
+
+    <p>The disableDevtool object exposes the md5 method, which can be used by developers when encrypting:</p>
+
+    <p><code>disableDevtool.md5(&#39;xxx&#39;);</code></p>
+
+    <h3>3.2 script uses attribute configuration</h3>
+
+    <p><code>&lt;script
+    id=&#39;disable-devtool&#39;
+    src=&#39;https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js&#39;
+    md5=&#39;xxx&#39;
+    url=&#39;xxx&#39;
+    tk-name=&#39;xxx&#39;
+    debug-delay=&#39;xxx&#39;
+    interval=&#39;xxx&#39;
+    disable-menu=&#39;xxx&#39;>
+&lt;/script&gt;</code></p>
+    </blockquote>
+
+    <p>Note:<br>
+        1. You must bring the id=&#39;disable-devtool&#39;` attribute when configuring attributes<br>
+        2.Attribute configuration is optional, the fields are the same as in 3.1, the difference is that the hump form is
+        changed to horizontal line division <br>
+        3. The script tag is recommended to be placed at the bottom of the body</p>
+
+    <h3>3.3 script does not use attribute configuration</h3>
+
+    <p><code>&lt;script src=&#39;https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js&#39;&gt;&lt;/script&gt;
+&lt;script&gt;
+    DisableDevtool({
+        // The parameters are the same as in 3.1
+    })
+&lt;/script&gt;</code></p>
+    <script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+</body>
+
+</html>

npm/README.cn.md

@@ -0,0 +1,134 @@
+
+<h1><a href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
+
+<h2>🚀 一行代码搞定禁用web开发者工具 </h2>
+
+----
+
+<p align="">
+    <a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
+    <a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
+</p> 
+
+<p align="">
+    <a href="https://www.npmjs.com/package/disable-devtool"><img src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
+    <a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
+    <a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
+    <a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
+    <a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
+    <a href="https://github.com/theajack/disable-devtool/issues"><img src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
+    <a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
+</p>
+
+**[English](https://github.com/theajack/disable-devtool/blob/master/helper/README.en.md) | [在线试用/文档](https://theajack.gitee.io/disable-devtool) | [Gitee](https://gitee.com/theajack/disable-devtool)**
+
+## 1. 快速使用
+
+### 1.1 npm 引用
+
+```
+npm i disable-devtool
+```
+
+```js
+import disableDevtool from 'disable-devtool';
+
+disableDevtool();
+```
+
+### 1.2 script属性配置
+
+```html
+<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+```
+
+## 2.功能
+
+disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’
+
+该库有以下特性:
+
+1. 支持可配置是否禁用右键菜单
+2. 禁用 f12 和 ctrl+shift+i 快捷键
+3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
+4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
+5. 支持几乎所有浏览器
+6. 高度可配置
+7. 使用极简、体积小巧 (仅6kb)
+8. 支持npm引用和script标签引用(属性配置)
+
+## 3. 使用
+
+### 3.1 npm使用时的配置参数
+
+安装 disable-devtool
+
+```
+npm i disable-devtool
+```
+
+```js
+import disableDevtool from 'disable-devtool';
+
+disableDevtool(options);
+```
+
+options中的参数与说明如下：
+
+```ts
+declare interface optionStatic {
+    md5?: string; // 绕过禁用的md5值，详情见3.2，默认不启用绕过禁用
+    url?: string; // 关闭页面失败时的跳转页面，默认值为localhost
+    tkName?: string; // 绕过禁用时的url参数名称，默认为 ddtk
+    ondevtoolopen?(): void; // 开发者面板打开的回调，启用时url参数无效
+    debugDelay?: number; // debug模式时的延迟 默认200ms
+    interval?: number; // 定时器的时间间隔 默认200ms
+    disableMenu?: boolean; // 是否禁用右键菜单 默认为true
+}
+```
+
+### 3.2 md5 与 tk 绕过禁用
+
+该库中使用 key 与 md5 配合的方式使得开发者可以在线上绕过禁用。
+
+流程如下：
+
+先指定一个 key a（该值不要记录在代码中），使用 md5 加密得到一个值 b，将b作为 md5 参数传入，开发者在访问 url 的时候只需要带上url参数 ddtk=a，便可以绕过禁用。
+
+disableDevtool对象暴露了 md5 方法，可供开发者加密时使用：
+
+```js
+disableDevtool.md5('xxx');
+```
+
+### 3.2 script使用属性配置
+
+```html
+<script 
+    id='disable-devtool'
+    src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
+    md5='xxx'
+    url='xxx'
+    tk-name='xxx'
+    debug-delay='xxx'
+    interval='xxx'
+    disable-menu='xxx'
+></script>
+```
+
+注：
+
+1. 属性配置时必须要带上 `id='disable-devtool'` 属性
+2. 属性配置都是可选的，字段与3.1中一致，区别是将驼峰形式改成横线分割
+3. 该script标签建议放在body最底部
+
+### 3.3 script不使用属性配置
+
+```html
+<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+<script>
+    DisableDevtool({
+        // 参数与3.1中一致
+    })
+</script>
+```

npm/README.md

@@ -1,67 +1,133 @@
-### This is a project build with [EBuild-Cli](https://github.com/theajack/ebuild-cli)
+<h1><a href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
 
-### Install dependencies
+<h2>🚀 Disable web developer tools with one line </h2>
+
+----
+
+<p align="">
+    <a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
+    <a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
+</p> 
+
+<p align="">
+    <a href="https://www.npmjs.com/package/disable-devtool"><img src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
+    <a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
+    <a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
+    <a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
+    <a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
+    <a href="https://github.com/theajack/disable-devtool/issues"><img src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
+    <a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
+</p>
+
+**[中文](https://github.com/theajack/disable-devtool/blob/master/README.cn.md) | [online trial/document](https://theajack.gitee.io/disable-devtool) | [Gitee](https://gitee.com/theajack/disable-devtool)**
+
+## 1. Quick use
+
+### 1.1 npm reference
 
 ```
-npm install
+npm i disable-devtool
 ```
 
-use taobao repository
-
-```
-npm install --registry https://registry.npm.taobao.org
-```
-
-### Init git repository
-
-```
-git init
-git add README.md
-git commit -m "first commit"
-git remote add origin {Your remote git repository address}
-git push -u origin master
-```
-
-### Commond
-
-```
-npm run dev
-npm run build
-npm run build:npm
-npm run publish
-npm run lint
-npm run copy-latest
-npm run modify-version
-npm run copy-npm
-```
-
-### ebuild.config.js
-
 ```js
-module.exports = {
+import disableDevtool from 'disable-devtool';
-    'tranToEs5InNpm': true, // wether use babel
+
-    'packageFiles': [
+disableDevtool();
-        './package.json'
-        // config which package.json files need to modify version
-        // '../npm/package.json', // this is an example
-    ],
-    'versioJsEs6Module': true, // use es6(export default) or require(module.exports=)
-    'versioJsFiles': [
-        // config which version.js files need to modify version
-        // '../npm/version.js', // this is an example
-    ],
-    'name': '',
-    'version': '0.0.1',
-    'npmExternals': {
-        // example
-        // 'md5': 'md5'
-    },
-    'npmPaths': [
-        'npm'
-    ]
-};
 ```
 
-### Vscode plugin
+### 1.2 script attribute configuration
 
-Install 'ESLint' plugin
+```html
+<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+```
+
+## 2. Function
+
+disable-devtool can disable all the methods that can enter the developer tools to prevent ‘code handling’ through the developer tools
+
+The library has the following features:
+
+1. Support configurable whether to disable the right-click menu
+2. Disable f12 and ctrl+shift+i shortcuts
+3. Support recognition to open the developer tools from the browser menu bar and close the current page
+4. Developers can bypass the disablement (use tk and md5 encryption for url parameters)
+5. Support almost all browsers
+6. Highly configurable
+7. Minimal use, small size (only 6kb)
+8. Support npm reference and script tag reference (attribute configuration)
+
+## 3. Use
+
+### 3.1 Configuration parameters when using npm
+
+Install disable-devtool
+
+```
+npm i disable-devtool
+```
+
+```js
+import disableDevtool from 'disable-devtool';
+
+disableDevtool(options);
+```
+
+The parameters and descriptions in options are as follows:
+
+```ts
+declare interface optionStatic {
+    md5?: string; // Bypass the disabled md5 value, see 3.2 for details, the bypass disable is not enabled by default
+    url?: string; // Jump to the page when closing the page fails, the default value is localhost
+    tkName?: string; // Bypass the url parameter name when disabled, the default is ddtk
+    ondevtoolopen?(): void; // Callback for opening the developer panel, the url parameter is invalid when enabled
+    debugDelay?: number; // The delay in debug mode is 200ms by default
+    interval?: number; // Timer interval is 200ms by default
+    disableMenu?: boolean; // Whether to disable the right-click menu The default is true
+}
+```
+
+### 3.2 md5 and tk bypass disable
+
+The combination of key and md5 in the library allows developers to bypass the disabling online.
+
+The process is as follows:
+
+First specify a key a (the value should not be recorded in the code), use md5 encryption to obtain a value b, and pass in b as the md5 parameter. Developers only need to bring the url parameter ddtk=a when accessing the url. Bypass disabled.
+
+The disableDevtool object exposes the md5 method, which can be used by developers when encrypting:
+
+```js
+disableDevtool.md5('xxx');
+```
+
+### 3.2 script uses attribute configuration
+
+```html
+<script
+    id='disable-devtool'
+    src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
+    md5='xxx'
+    url='xxx'
+    tk-name='xxx'
+    debug-delay='xxx'
+    interval='xxx'
+    disable-menu='xxx'
+></script>
+```
+
+Note:
+
+1. You must bring the id='disable-devtool'` attribute when configuring attributes
+2. Attribute configuration is optional, the fields are the same as in 3.1, the difference is that the hump form is changed to horizontal line division
+3. The script tag is recommended to be placed at the bottom of the body
+
+### 3.3 script does not use attribute configuration
+
+```html
+<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
+<script>
+    DisableDevtool({
+        // The parameters are the same as in 3.1
+    })
+</script>
+```

npm/ebuild.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("ebuild",[],t):"object"==typeof exports?exports.ebuild=t():e.ebuild=t()}(this,(function(){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t){console.log("Hello world!"),alert("Hello world!")}])}));

npm/index.d.ts

@@ -0,0 +1,17 @@
+declare interface optionStatic {
+    md5?: string;
+    url?: string;
+    tkName?: string;
+    ondevtoolopen?(): void; // ondevtoolopen 优先级高于 url
+    debugDelay?: number;
+    interval?: number;
+    disableMenu?: boolean;
+}
+declare interface DDTStatic {
+    (option?: optionStatic): void;
+    md5(text?: string): string;
+}
+
+declare const ddt: DDTStatic;
+
+export default ddt;

npm/package.json

@@ -1,20 +1,21 @@
 {
     "name": "disable-devtool",
     "version": "0.0.1",
-    "description": "Ebuild project",
+    "description": "Disable web developer tools from the f12 button, right-click and browser ",
-    "main": "ebuild.min.js",
+    "main": "disable-devtool.min.js",
     "scripts": {
+        "dev": "webpack-dev-server --open --config webpack-config/dev.js",
+        "start": "npm run dev",
         "build": "webpack --config webpack-config/build.js",
         "publish": "npm publish npm",
-        "dev": "webpack-dev-server --open --config webpack-config/dev.js",
         "lint": "eslint src --ext js"
     },
-    "unpkg": "ebuild.min.js",
+    "unpkg": "disable-devtool.min.js",
-    "jsdelivr": "ebuild.min.js",
+    "jsdelivr": "disable-devtool.min.js",
     "typings": "index.d.ts",
     "repository": {
         "type": "git",
-        "url": "https://github.com/theajack/ebuild-cli"
+        "url": "https://github.com/theajack/disable-devtool"
     },
     "keywords": [
         "ebuild-cli"
@@ -22,7 +23,7 @@
     "author": "theajack",
     "license": "MIT",
     "bugs": {
-        "url": ""
+        "url": "https://github.com/theajack/disable-devtool/issues"
     },
     "homepage": ""
 }

package.json

@@ -1,13 +1,13 @@
 {
     "name": "disable-devtool",
     "version": "0.0.1",
-    "description": "Ebuild project",
+    "description": "Disable web developer tools from the f12 button, right-click and browser ",
-    "main": "ebuild.min.js",
+    "main": "disable-devtool.min.js",
-    "unpkg": "ebuild.min.js",
+    "unpkg": "disable-devtool.min.js",
-    "jsdelivr": "ebuild.min.js",
+    "jsdelivr": "disable-devtool.min.js",
     "typings": "index.d.ts",
     "bugs": {
-        "url": ""
+        "url": "https://github.com/theajack/disable-devtool/issues"
     },
     "homepage": "",
     "scripts": {
@@ -20,7 +20,7 @@
     "author": "theajack",
     "repository": {
         "type": "git",
-        "url": "https://github.com/theajack/ebuild-cli"
+        "url": "https://github.com/theajack/disable-devtool"
     },
     "keywords": [
         "ebuild-cli"

public/index.html

@@ -4,9 +4,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>A project build with EBuild-Cli</title>
+    <title>Disable Devtool Demo</title>
 </head>
 <body>
-    <script src="./bundle.js"></script>
+    <!-- <script src="./bundle.js"></script> -->
+    <script id='disable-devtool' 
+        md5='d4de605ccb923b7e876b3218a1474653' 
+        tk-name='tk' 
+        src="../npm/disable-devtool.min.js"></script>
 </body>
 </html>

public/main.js

@@ -1,3 +1,10 @@
-import {disableDevtool} from '../src';
+import disableDevtool from '../src';
 
-disableDevtool();
+disableDevtool({
+    md5: 'd4de605ccb923b7e876b3218a1474653',
+    // url: 'https://www.qq.com',
+    ondevtoolopen: () => {
+        // window.location.href = 'https://www.qq.com';
+    },
+    tkName: 'xx',
+});

src/config.js

@@ -2,9 +2,12 @@ import {closeWindow} from './util';
 
 export let config = {
     md5: '',
-    ondevtoolopen: closeWindow,
+    ondevtoolopen: closeWindow, // ondevtoolopen 优先级高于 url
-    homeUrl: 'http://localhost',
+    url: 'http://localhost',
     tkName: 'ddtk',
+    debugDelay: 200,
+    interval: 200,
+    disableMenu: true
 };
 
 export function mergeConfig (opts = {}) {

src/index.d.ts

@@ -0,0 +1,17 @@
+declare interface optionStatic {
+    md5?: string;
+    url?: string;
+    tkName?: string;
+    ondevtoolopen?(): void; // ondevtoolopen 优先级高于 url
+    debugDelay?: number;
+    interval?: number;
+    disableMenu?: boolean;
+}
+declare interface DDTStatic {
+    (option?: optionStatic): void;
+    md5(text?: string): string;
+}
+
+declare const ddt: DDTStatic;
+
+export default ddt;

src/index.js

@@ -1,65 +1,3 @@
-import {disableKeyAndMenu} from './key-menu';
+import {disableDevtool} from './main';
-import {initInterval, registInterval} from './interval';
-import {closeWindow, getNowTime, getUrlParam} from './util';
-import {mergeConfig, config} from './config';
-import md5 from './md5';
 
-let _onDevToolOpen = closeWindow;
+export default disableDevtool;
-
-export function disableDevtool (opts) {
-    mergeConfig(opts);
-    if (checkTk()) {
-        return;
-    }
-    initInterval();
-    disableKeyAndMenu();
-    initDebugger();
-    initDevTool();
-}
-
-export function onDevToolOpen () {
-    _onDevToolOpen();
-}
-
-function checkTk () {
-    if (config.md5) { // 启用了 md5
-        let tk = getUrlParam(config.tkName);
-        if (md5(tk) === config.md5) { // 命中tk
-            return true;
-        }
-    }
-    return false;
-}
-
-function initDebugger () {
-    let last = getNowTime();
-    registInterval(() => {
-        eval('debugger');
-        let now = getNowTime();
-        if (now - last > 1200) {
-            onDevToolOpen();
-        } else {
-            last = now;
-        }
-    });
-}
-
-function initDevTool () {
-    const isFF = ~navigator.userAgent.indexOf('Firefox');
-    let toTest = '';
-    if (isFF) {
-        toTest = /./;
-        toTest.toString = function () {
-            onDevToolOpen();
-        };
-    } else {
-        toTest = new Image();
-        toTest.__defineGetter__('id', function () {
-            onDevToolOpen();
-        });
-    }
-    registInterval(() => {
-        console.log(toTest);
-        console.clear && console.clear();
-    });
-}

src/interval.js

@@ -1,10 +1,20 @@
-let interval = null;
+import {config} from './config';
+import {isPC} from './util';
+
+let interval = null, timer = null;
 let calls = [];
 
-export function initInterval (time = 1000) {
+export function initInterval () {
     interval = window.setInterval(() => {
         calls.forEach(fn => {fn();});
-    }, time);
+    }, config.interval);
+    // 两秒之后判断 如果不是pc去掉定时器interval，为了优化移动端的性能
+    // 如果控制面板被打开了该定时器timer会被清除
+    timer = setTimeout(() => {
+        if (!isPC()) {
+            clearInterval();
+        }
+    }, 2000);
 }
 
 export function registInterval (fn) {
@@ -14,3 +24,7 @@ export function registInterval (fn) {
 export function clearInterval () {
     window.clearInterval(interval);
 }
+
+export function clearTimeout () {
+    window.clearTimeout(timer);
+}

src/key-menu.js

@@ -1,3 +1,5 @@
+import {config} from './config';
+
 export function disableKeyAndMenu () {
     window.addEventListener('keydown', (e) => {
         if (e.keyCode === 123 || (e.shiftKey && e.ctrlKey && e.keyCode === 73)) {
@@ -5,8 +7,10 @@ export function disableKeyAndMenu () {
             return false;
         }
     });
-    window.addEventListener('contextmenu', (e) => {
+    if (config.disableMenu) {
-        e.returnValue = false;
+        window.addEventListener('contextmenu', (e) => {
-        return false;
+            e.returnValue = false;
-    });
+            return false;
+        });
+    }
 }

src/main.js

@@ -0,0 +1,91 @@
+import {disableKeyAndMenu} from './key-menu';
+import {initInterval, registInterval, clearTimeout} from './interval';
+import {formatName, getNowTime, getUrlParam} from './util';
+import {mergeConfig, config} from './config';
+import md5 from './md5';
+
+export function disableDevtool (opts) {
+    mergeConfig(opts);
+    if (checkTk()) {
+        return;
+    }
+    initInterval();
+    disableKeyAndMenu();
+    initDevTool();
+    initDebugger();
+}
+
+disableDevtool.md5 = md5;
+
+export function onDevToolOpen () {
+    clearTimeout();
+    config.ondevtoolopen();
+}
+
+function checkTk () {
+    if (config.md5) { // 启用了 md5
+        let tk = getUrlParam(config.tkName);
+        if (md5(tk) === config.md5) { // 命中tk
+            return true;
+        }
+    }
+    return false;
+}
+
+function initDebugger () {
+    let fn = new Function('debugger');
+    let last = getNowTime();
+    registInterval(() => {
+        fn();
+        let now = getNowTime();
+        // interval 时间是 config.interval，设置config.debugDelay是为了给一个执行的时间
+        if (now - last > config.interval + config.debugDelay) {
+            onDevToolOpen();
+        } else {
+            last = now;
+        }
+    });
+}
+
+function initDevTool () {
+    const isFF = ~navigator.userAgent.indexOf('Firefox');
+    let toTest = '';
+    if (isFF) {
+        toTest = /./;
+        toTest.toString = function () {
+            onDevToolOpen();
+        };
+    } else {
+        toTest = new Image();
+        toTest.__defineGetter__('id', function () {
+            onDevToolOpen();
+        });
+    }
+    registInterval(() => {
+        console.log(toTest);
+        console.clear && console.clear();
+    });
+}
+
+function checkScriptUse () {
+    let dom = document.getElementById('disable-devtool');
+    if (!dom) {
+        return;
+    }
+    let json = {};
+    ['md5', 'url', 'tk-name', 'debug-delay', 'interval', 'disable-menu'].forEach(name => {
+        let value = dom.getAttribute(name);
+        if (value !== null) {
+            if (name === 'debug-delay' || name === 'interval') {
+                value = parseInt(value);
+            } else if (name === 'disable-menu') {
+                value = value === 'false' ? false : true;
+            }
+            json[formatName(name)] = value;
+        }
+    });
+    disableDevtool(json);
+}
+
+
+checkScriptUse();

src/util.js

@@ -1,12 +1,16 @@
+import {config} from './config';
+
 export function isPC () {
     return !/(iphone|ipad|ipod|ios|android)/i.test(navigator.userAgent.toLowerCase());
 }
 
-export function closeWindow (url = 'https://localhost') {
+export function closeWindow () {
+    // 需要是有js跳转到这个页面才可以关闭这个页面
     window.opener = null;
     window.open('', '_self');
     window.close();
-    window.location.href = url;
+    // 否则执行跳转到 url
+    window.location.href = config.url;
 }
 
 export function getNowTime () {
@@ -24,3 +28,21 @@ export function getUrlParam (name) {
     }
     return '';
 }
+
+export function formatName (name) {
+    if (name.indexOf('-') === -1) {
+        return name;
+    }
+    var flag = false;
+    return name.split('').map(c => {
+        if (c === '-') {
+            flag = true;
+            return '';
+        }
+        if (flag) {
+            flag = false;
+            return c.toUpperCase();
+        }
+        return c;
+    }).join('');
+}

webpack-config/build.js

@@ -6,8 +6,8 @@ module.exports = {
     entry: path.resolve('./', 'src/index.js'),
     output: {
         path: path.resolve('./', 'npm'),
-        filename: 'ebuild.min.js',
+        filename: 'disable-devtool.min.js',
-        library: 'ebuild',
+        library: 'DisableDevtool',
         libraryTarget: 'umd',
         umdNamedDefine: true,
         globalObject: 'this'