Skip to content

Commit

Permalink
✨ 新建脚本页面URL识别
Browse files Browse the repository at this point in the history
  • Loading branch information
CodFrm committed Jan 14, 2022
1 parent 71a039f commit 429dd55
Show file tree
Hide file tree
Showing 9 changed files with 96 additions and 50 deletions.
2 changes: 1 addition & 1 deletion 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/",
Expand Down
2 changes: 1 addition & 1 deletion src/background.ts
Expand Up @@ -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';
Expand Down
7 changes: 6 additions & 1 deletion src/template/normal.tpl
Expand Up @@ -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...
})();
1 change: 1 addition & 0 deletions src/types/main.d.ts
Expand Up @@ -45,6 +45,7 @@ interface INewScript {
scriptId: number;
tabKey: string | number;
template?: 'normal' | 'crontab' | 'background';
param?: AnyMap
}

interface IUpdateMeta {
Expand Down
11 changes: 10 additions & 1 deletion src/views/components/ResizableEditor.vue
Expand Up @@ -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)}`;
Expand Down Expand Up @@ -75,7 +76,7 @@ export default class ResizableEditor extends Vue {
return;
}
let template: typeof crontabTpl;
let template: string;
switch (this.template) {
case 'normal':
Expand All @@ -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,
Expand Down
27 changes: 19 additions & 8 deletions src/views/pages/Option/index.tsx
Expand Up @@ -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();

Expand All @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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(() => {
Expand Down
9 changes: 7 additions & 2 deletions src/views/pages/Option/tabs/ScriptTab/Editor.vue
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand All @@ -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');
Expand Down
2 changes: 2 additions & 0 deletions src/views/pages/Option/tabs/ScriptTab/index.vue
Expand Up @@ -14,6 +14,7 @@
:script="script"
:scriptId="scriptId"
:template="template"
:param="param"
:onMetaChange="onMetaChange"
@initial-script="handleInitialSctipt"
@save-script="handleSaveScript"
Expand Down Expand Up @@ -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;
Expand Down
85 changes: 49 additions & 36 deletions src/views/pages/Popup/index.vue
Expand Up @@ -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>
Expand Down Expand Up @@ -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/问题反馈',
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 429dd55

Please sign in to comment.