✨ 新建脚本页面URL识别

package.json

@@ -1,6 +1,6 @@
 {
     "name": "scriptcat",
-    "version": "0.8.0",
+    "version": "0.8.1",
     "description": "脚本猫,一个可以执行用户脚本的浏览器扩展,万物皆可脚本化,让你的浏览器可以做更多的事情!",
     "scripts": {
         "lint": "eslint --ext .js,.ts,.tsx tests/ src/",

src/background.ts

@@ -10,7 +10,7 @@ import { migrate } from './model/migrate';
 import { SCRIPT_STATUS_ENABLE, Script, SCRIPT_STATUS_DISABLE } from './model/do/script';
 import { MapCache } from './pkg/storage/cache/cache';
 import { get } from './pkg/utils/utils';
-import { ExtVersion, Server } from './apps/config';
+import { Server } from './apps/config';
 import { Subscribe, SUBSCRIBE_STATUS_ENABLE } from './model/do/subscribe';
 import { UserManager } from './apps/user/manager';
 import { ToolsManager } from './apps/tools/manager';

src/template/normal.tpl

@@ -4,6 +4,11 @@
 // @version      0.1.0
 // @description  try to take over the world!
 // @author       You
+// @match        {{match}}
 // ==/UserScript==
 
-// 在此处键入代码……
+(function() {
+    'use strict';
+
+    // Your code here...
+})();

src/types/main.d.ts

@@ -45,6 +45,7 @@ interface INewScript {
     scriptId: number;
     tabKey: string | number;
     template?: 'normal' | 'crontab' | 'background';
+    param?: AnyMap
 }
 
 interface IUpdateMeta {

src/views/components/ResizableEditor.vue

@@ -36,6 +36,7 @@ export default class ResizableEditor extends Vue {
   // 可以选择默认模板
   @Prop() template!: 'normal' | 'crontab' | 'background';
   // @Prop({ default: "crontab" }) template!: "normal" | "crontab" | "background";
+  @Prop() param?: AnyMap;
 
   // 页面上存在多个editor实例时，contentKeyService会报错
   uniqueEditorId = `container${String(Math.random()).slice(2)}`;
@@ -75,7 +76,7 @@ export default class ResizableEditor extends Vue {
       return;
     }
 
-    let template: typeof crontabTpl;
+    let template: string;
 
     switch (this.template) {
       case 'normal':
@@ -90,6 +91,14 @@ export default class ResizableEditor extends Vue {
         template = backgroundTpl;
         break;
     }
+    console.log(this.param);
+    for (const key in this.param) {
+      template = template.replaceAll(
+        '{{' + key + '}}',
+        <string>this.param[key]
+      );
+    }
+    template = template.replaceAll(/\s+\/\/\s?@.*?\s+{{.*?}}/g, '');
 
     this.editor = editor.create(edit, {
       language: this.language,

src/views/pages/Option/index.tsx

@@ -67,6 +67,7 @@ export default class App extends Vue {
     generateScriptTab(
         scriptId: number,
         template: 'normal' | 'crontab' | 'background' = 'crontab',
+        param?: AnyMap
     ): ITabItem {
         const tabKey = Math.random();
 
@@ -81,7 +82,7 @@ export default class App extends Vue {
                         height: '100%',
                     }}
                 >
-                    <ScriptTab tabKey={tabKey} scriptId={scriptId} template={template} />
+                    <ScriptTab tabKey={tabKey} scriptId={scriptId} template={template} param={param} />
                 </div>
             ),
             closable: true,
@@ -183,7 +184,21 @@ export default class App extends Vue {
                 this.handleEditScript({ scriptId: parseInt(query.id as string) });
             } else if (query?.target === 'initial') {
                 // 新建脚本
-                eventBus.$emit<INewScript>(EventType.NewScript, { template: 'normal' } as any);
+                chrome.storage.local.get(["activeTabUrl"], (items) => {
+                    console.log(items);
+                    if (items['activeTabUrl']) {
+                        chrome.storage.local.remove('activeTabUrl');
+                        eventBus.$emit<INewScript>(EventType.NewScript, {
+                            template: 'normal', param: {
+                                match: items['activeTabUrl'].url
+                            }
+                        } as any);
+                    } else {
+                        eventBus.$emit<INewScript>(EventType.NewScript, {
+                            template: 'normal'
+                        } as any);
+                    }
+                });
             }
         });
         // deubg用的bg
@@ -253,20 +268,16 @@ export default class App extends Vue {
     }
 
     /** 在原PlusTab中保存了脚本时触发 */
-    handleNewScript({ scriptId, tabKey, template }: INewScript) {
+    handleNewScript({ scriptId, tabKey, template, param }: INewScript) {
         console.log('handleNewScript');
 
         // 需要知道是哪一个tab触发了保存事件，因为可能同时打开了多个“新建脚本”
         const scriptTabIndex = this.allTabs.findIndex((tab) => tab.tabKey == tabKey);
 
-        console.log({
-            scriptTabIndex,
-        });
-
         this.updateTab({
             // -1时，说明目前并没有打开“新建脚本”，只有固定的3个基础页面，需要新开，即initial
             index: scriptTabIndex === -1 ? this.allTabs.length : scriptTabIndex,
-            newTab: this.generateScriptTab(scriptId, template),
+            newTab: this.generateScriptTab(scriptId, template, param),
         });
 
         this.$nextTick(() => {

src/views/pages/Option/tabs/ScriptTab/Editor.vue

@@ -56,7 +56,11 @@
     </div>
 
     <div class="sub-container">
-      <ResizableEditor ref="resizableEditor" :template="template" />
+      <ResizableEditor
+        ref="resizableEditor"
+        :template="template"
+        :param="param"
+      />
     </div>
     <input type="file" id="fileInput" hidden accept=".js" />
   </div>
@@ -98,6 +102,7 @@ export default class CloseButton extends Vue {
   @Prop() scriptId!: number;
   @Prop() script!: Script;
   @Prop() template!: 'normal' | 'crontab' | 'background';
+  @Prop() param?: AnyMap;
 
   @Prop() onMetaChange!: boolean;
   hasInitial = false;
@@ -122,7 +127,7 @@ export default class CloseButton extends Vue {
       var file = fileInput!.files![0];
       var reader = new FileReader();
       let _this = this;
-      reader.onload = function () {
+      reader.onload = function() {
         _this.editor.setValue(<string>this.result);
       };
       reader.readAsText(file, 'utf-8');

src/views/pages/Option/tabs/ScriptTab/index.vue

@@ -14,6 +14,7 @@
           :script="script"
           :scriptId="scriptId"
           :template="template"
+          :param="param"
           :onMetaChange="onMetaChange"
           @initial-script="handleInitialSctipt"
           @save-script="handleSaveScript"
@@ -92,6 +93,7 @@ export default class ScriptTab extends Vue {
   script: Script = <Script>{};
 
   @Prop() template!: 'normal' | 'crontab' | 'background';
+  @Prop() param?: AnyMap;
 
   hasInitial = false;
   onMetaChange = false;

src/views/pages/Popup/index.vue

@@ -42,6 +42,7 @@
             :href="item.route"
             target="_black"
             dense
+            @click="item.click"
           >
             <v-list-item-icon>
               <v-icon v-text="item.icon"></v-icon>
@@ -155,16 +156,31 @@ export default class Popup extends Vue {
 
   panel = [0];
 
-  otherOptions: { title: string; icon: string; route: string }[] = [
+  otherOptions: {
+    title: string;
+    icon: string;
+    route: string;
+    click?: () => void;
+  }[] = [
     {
       title: '新建脚本',
       icon: mdiPlus,
       route: '/options.html#/?target=initial',
+      click: () => {
+        chrome.tabs.query({ active: true }, (tab) => {
+          if (tab.length && tab[0].url?.startsWith('http')) {
+            chrome.storage.local.set({
+              activeTabUrl: { url: tab[0].url, t: new Date().getTime() },
+            });
+          }
+        });
+      },
     },
     {
       title: '获取脚本',
       icon: mdiMagnify,
-      route: 'https://docs.scriptcat.org/use/#%E8%8E%B7%E5%8F%96%E8%84%9A%E6%9C%AC',
+      route:
+        'https://docs.scriptcat.org/use/#%E8%8E%B7%E5%8F%96%E8%84%9A%E6%9C%AC',
     },
     {
       title: 'Bug/问题反馈',
@@ -215,41 +231,38 @@ export default class Popup extends Vue {
       }
       this.remoteVersion = items['version'];
     });
-    chrome.tabs.query(
-      { active: true, lastFocusedWindow: true },
-      async (tabs) => {
-        MsgCenter.sendMessage(
-          RequestTabRunScript,
-          {
-            tabId: tabs[0].id,
-            url: tabs[0].url,
-          },
-          (val) => {
-            this.scripts = val.run;
-            this.menu = val.runMenu || {};
-            this.bgMenu = val.bgMenu || {};
-            // 将有菜单的后台脚本,放到运行脚本中
-            this.scriptConrtoller
-              .scriptList((where) => {
-                return where
-                  .where('type')
-                  .anyOf([SCRIPT_TYPE_BACKGROUND, SCRIPT_TYPE_CRONTAB]);
-              })
-              .then((result) => {
-                this.bgScripts = result;
-                let map = new Map();
-                result.forEach((val) => {
-                  map.set(val.id, val);
-                });
-                for (const id in this.bgMenu) {
-                  this.scripts.push(map.get(parseInt(id)));
-                  this.menu[id] = this.bgMenu[id];
-                }
+    chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
+      MsgCenter.sendMessage(
+        RequestTabRunScript,
+        {
+          tabId: tabs[0].id,
+          url: tabs[0].url,
+        },
+        (val) => {
+          this.scripts = val.run;
+          this.menu = val.runMenu || {};
+          this.bgMenu = val.bgMenu || {};
+          // 将有菜单的后台脚本,放到运行脚本中
+          void this.scriptConrtoller
+            .scriptList((where) => {
+              return where
+                .where('type')
+                .anyOf([SCRIPT_TYPE_BACKGROUND, SCRIPT_TYPE_CRONTAB]);
+            })
+            .then((result) => {
+              this.bgScripts = result;
+              let map = new Map();
+              result.forEach((val) => {
+                map.set(val.id, val);
               });
-          }
-        );
-      }
-    );
+              for (const id in this.bgMenu) {
+                this.scripts.push(map.get(parseInt(id)));
+                this.menu[id] = this.bgMenu[id];
+              }
+            });
+        }
+      );
+    });
   }
 }
 </script>