[New extension] console

[CarsonSlovoka]

代辦事項

• 在Input欄位按下ESC後可以清除輸入
• 可以提供一些排序方式讓使用者做選擇 (最後瀏覽時間、站源、標題名稱等等)
• 使用tree的方式來顯示list指令
• list指令可以把最後查看時間附註在之後
• 壓縮代碼，建立min.js mishoo/UglifyJS
• 影片加速可以套用在有iframe的視窗
• 影片加速的注入，只在網頁中有影片的時候才會特別在console著名有載入
• 優化list搜尋的速度，讓他盡量不要卡頓
• list指令的關閉按鈕有點醜，用圖標取代 fdb870d
• #17
• 影音媒體可能來自，http:, https:, file:, ftp:, or chrome-extension:，所以這些來源都要可以支援 (018ccff)

---

• #9
• #8

---

• ★ 新增playbackRate的調整(調整影片速度) (腳本注入) #5 (comment)

---

• 🐛修正某些正規式凸顯顏色出不來的問題，例如輸入bk-file (news|video) (2df3114)

---

• 新增bookmark的瀏覽命令 (fb3e496)
• 自動完成可以支持a(連結)並且能用enter觸發 (db03788)
• 可以瀏覽以前所輸入過的命令 (上限20個) (10760d2)
• 讓命令輸入完畢之後，滾動條可以自動移至最下方 (b2e05ca)

---

• ★ 讓input可以支援autocomplete #5 (comment)

---

• 新增chrome的command [chrome URLs](chrome://about, chrome://chrome-urls/) (#5 (comment))
• 當list出來之後，可以有一個按鈕來關閉掉分頁 ( af2fdbc )

---

• 新增math的help訊息 (fc859f2)
  • 發現一個bug: 當函數的參數為變數時無法正常工作。 例如 log{e}

---

• bug修復，groups可能因為正規式match不到，導致沒有結果。 (a240889)

---

• 能提供簡單的數學運算 (3252352)
• 依照圖標，把相同的項目放在一起 (3252352)
• 限制終端機的顯示大小，最多不會超過到命令列 (3252352)

---

• 提供終端機，可以輸入命令，並且可以顯示當前所有開啟的tab等相關指令 (b05dcc7)

[CarsonSlovoka]

3252352

• 因為CSP的限制，並沒辦法直接用eval來替代，所以要自己parse字串並進行運算，相關的文章可以參考Equation (expression) parser with precedence?

• 圖標放置在一塊，可以先把tab進行排序即可
  

  chrome/extensions/console/static/js/src/console.js

  Lines 58 to 68 in 3252352

  	windowArray.forEach(item => {
  	item.tabs.sort( // Let the same icons be arranged together.
  	(a, b) => {
  	a.favIconUrl = a.favIconUrl?? ""
  	b.favIconUrl = b.favIconUrl?? ""
  	return a.favIconUrl.localeCompare(b.favIconUrl)
  	}
  	).forEach(tab => { // sort((tab)=>tab.favIconUrl)
  	this.addA(tab.title, tab.url, tab.windowId, tab.favIconUrl)
  	})
  	})

  其中sort(a,b)=>{return val} 當 val > 0, b會排在a之前。

• 終端機資訊的高度可以利用vh來限制
  

  chrome/extensions/console/templates/console.html

  Line 16 in 3252352

  style="max-height: 86vh; overflow: auto;"> <!-- Do not exceed the command line. -->

[CarsonSlovoka]

455e04e

新增了 ArgumentParser 將 = 的運算和一般的指令(list, ls help,...)等合併，使代碼更容易維護

chrome/extensions/console/static/js/pkg/flag/argument-parser.js

Line 37 in 455e04e

export function ArgumentParser(str) {

[CarsonSlovoka]

f589ba2

chrome提供的命令很多，為了讓使用者可以更快輸入，所以把一些關鍵詞縮短，但麻煩的是就要hard code才可以。

因此打算取消這機制，改支援正規式的搜尋，列出使用者可能想要輸入的命令來取代。

---

額外修復了一個bug

chrome/extensions/console/static/js/src/console.js

Lines 225 to 232 in af2fdbc

	for (const cmd of cmdObj.cmdArray) {
	if (cmd.aliases.find(aliases => inputValue.startsWith(aliases)) === undefined) {
	continue
	}
	if (cmd.func !== undefined) {
	cmd.func(inputValue.slice(cmd.aliases.length))
	input.value = ""
	return

cmd.aliases 是一個Array，所以這相當於擷取掉開頭的前幾個字母，並不能把整個關鍵字換掉

[CarsonSlovoka]

f0de045

• 由於加入了自動完成，所以把原本放在下方的input改放到上面來，才有空間顯示自動完成的列表
• 在chrome的命令中刪除掉使用aliases所建立的複雜狀況(反正已經有自動完成可以輔助了
  

  chrome/extensions/console/static/js/src/console.js

  Lines 101 to 120 in f589ba2

  	if (argObj === undefined) {
  	let [cmdName, subCmd, ...others] = expression.trim().split(" ")
  	cmdName =
  	cmdName === "v" ? "version" :
  	cmdName === "ext" ? "extensions" :
  	cmdName === "game" ? "" :
  	cmdName === "media" ? "media" : cmdName
  	if (cmdName === undefined) {
  	this.ShowErrMsg(`Unknown command: ${expression}`, "❌")
  	showChromeHelp()
  	return
  	}
  	subCmd = subCmd === "hotkey" ? "/shortcuts" :
  	subCmd === "internals" ? `-${subCmd}` :
  	subCmd === "engagement" ? `-${subCmd}` :
  	subCmd === undefined ? "" : subCmd
  	return OpenURL(`chrome://${cmdName}${subCmd}`)

---

關於自動完成的腳本，是從我的私人專案中搬移過來的，出處

[CarsonSlovoka]

61366c2

由於video會是出現在使用者所打開的tab之中，所以會需要注入腳本

chrome/extensions/console/static/js/src/popup.js

Lines 33 to 52 in 61366c2

	/*
	const injectionArray = []
	chrome.tabs.onActivated.addListener(({tabId, windowId}) => {
	const dataArray = injectionArray.filter(item=>item.tabId === tabId && item.windowId === windowId)
	if (dataArray.length === 0) {
	injectionArray.push({tabId, windowId})
	chrome.scripting.executeScript({
	target: {tabId},
	files:["/static/js/src/scripting/video-controls.js"],
	},
	)
	}
	})
	chrome.tabs.onRemoved.addListener(({tabId, windowId})=>{ // Not working, permission denied.
	const removeData = injectionArray.filter(item=>item.tabId === tabId && item.windowId === windowId)
	removeData.forEach(data=>{
	injectionArray.splice(injectionArray.indexOf(data), 1)
	})
	})*/

但是如果倚靠 chrome.scripting.executeScript 的方式，會有安全性的問題，

他可以在popup.js中使用，但不能由chrome.tabs.onActivated.addListener來發動，

因此這招行不通。

但有一個正確寫很棒的方式就是可以利用

chrome/extensions/console/manifest.json

Lines 26 to 34 in 61366c2

	"content_scripts": [
	{
	"matches": [
	"http://*/*",
	"https://*/*"
	],
	"js": ["static/js/src/scripting/video-controls.js"]
	}
	],

也就是允許在符合的網址，強制餵入js或者css

match的更多篩選可以參考

https://developer.chrome.com/docs/extensions/mv3/match_patterns/