✨ 增加清除全部辅助线的功能

Author: cfdxkk

popup.html

@@ -6,7 +6,8 @@
 		<div class="glgl-main-box">
 			<div class="glgl-popup-page-button" id="add-vertical-line">添加纵向辅助线</div>
 			<div class="glgl-popup-page-button" id="add-horizontal-line">添加横向辅助线</div>
-			<i style="padding-top: 40px; color: gray;">更多功能开发中...</i>
+			<div class="glgl-popup-page-button-warning" id="remove-all-lines">清空全部辅助线</div>
+			<i style="padding-top: 26px; color: gray;">更多功能开发中...</i>
 		</div>
 	</body>
 
@@ -42,5 +43,26 @@
 			background-color: #e1e1e1;
 			cursor: pointer;
 		}
+
+		.glgl-popup-page-button-warning{
+			width: 100%;
+			height: 30px;
+
+			background-color: #fdfdfd;
+
+			border-radius: 5px;
+			font-size: 1.2em;
+
+			margin-bottom: 10px;
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.glgl-popup-page-button-warning:hover{
+			background-color: #FF9090;
+			cursor: pointer;
+		}
 	</style>
 </html>

script/actions/addHorizontalLine.js

@@ -2,7 +2,8 @@ function addHorizontalLine() {
 	const bodyDom = document.body
 	const horizontalLineBgId = `gagl-horizontal-line-bg`
 	const horizontalLineId = `gagl-horizontal-line`
-	
+	const gaglLineBgClass = `gagl-line-bg`
+
 	let mouseIsDown = false
 
 	const horizontalLineBgMouseOverEvent = () => {
@@ -29,6 +30,7 @@ function addHorizontalLine() {
 		const horizontalLineBg = document.createElement('div')
 
 		horizontalLineBg.id = horizontalLineBgId
+		horizontalLineBg.className = gaglLineBgClass
 
 		horizontalLineBg.style.width = '100vw'
 		horizontalLineBg.style.height = '16px'

script/actions/addVerticalLine.js

@@ -2,6 +2,7 @@ function addVerticalLine() {
 	const bodyDom = document.body
 	const verticalLineBgId = `gagl-vertical-line-bg`
 	const verticalLineId = `gagl-vertical-line`
+	const gaglLineBgClass = `gagl-line-bg`
 
 	let mouseIsDown = false
 
@@ -29,6 +30,7 @@ function addVerticalLine() {
 		const verticalLineBg = document.createElement('div')
 
 		verticalLineBg.id = verticalLineBgId
+		verticalLineBg.className = gaglLineBgClass
 
 		verticalLineBg.style.width = '16px'
 		verticalLineBg.style.height = '100vh'

script/actions/removeAllLines.js

@@ -0,0 +1,17 @@
+async function removeAllLines() {
+	const gaglLineBgClass = `gagl-line-bg`
+	const lineDoms = await document.getElementsByClassName(gaglLineBgClass)
+	if (lineDoms && lineDoms.length > 0) {
+		const lineDOmsArray = []
+		for(let i = 0; i < lineDoms.length; i++) {
+			lineDOmsArray.push(lineDoms[i])
+		}
+		if (lineDOmsArray && lineDOmsArray.length > 0) {
+			for (let j = 0; j < lineDOmsArray.length; j++) {
+				lineDOmsArray[j].remove()
+			}
+		}
+	}
+}
+
+removeAllLines()

script/popup.js

@@ -7,7 +7,6 @@ const getCurrentTab = async () => {
 
 const getCurrentTabId = async () => {
 	const currentTab = await getCurrentTab()
-	console.log('currentTab', currentTab)
 	if (currentTab && currentTab.id) {
 		return currentTab.id
 	} else {
@@ -47,3 +46,22 @@ if (addHorizontalLineButton) {
 	addHorizontalLineButton.addEventListener('click', addHorizontalLineOnYourPage)
 }
 
+
+const removeAllLines = () => {
+	getCurrentTabId().then(currentTabId => {
+		chrome.scripting.executeScript({
+      target : {tabId : currentTabId},
+      files : [ "script/actions/removeAllLines.js" ],
+    })
+    .then(() => console.log("removeAllLines script injected"));
+	})
+}
+
+const removeAllLinesButton = document.getElementById('remove-all-lines')
+if (removeAllLinesButton) {
+	removeAllLinesButton.addEventListener('click', removeAllLines)
+}
+
+
+
+