Skip to content

Commit

Permalink
add dist
Browse files Browse the repository at this point in the history
  • Loading branch information
@greatanimalion
greatanimalion committed Aug 25, 2024
1 parent 70cb8a2 commit 79f6bfe
Show file tree
Hide file tree
Showing 33 changed files with 295 additions and 48 deletions.
2 changes: 0 additions & 2 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local
diary
# Editor directories and files
Expand Down
1 change: 1 addition & 0 deletions dist/assets/contentPage-BRJOJucW.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:300px;height:500px}
1 change: 1 addition & 0 deletions dist/assets/contentPage-CDEUwxKa.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:300px;height:470px;background-color:#f0f8ff;border-radius:3px}#drag-icon{height:30px;width:300px;text-align:center}*{margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/assets/contentPage-CDPcFCf0.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:270px;margin:0 auto;height:300px;padding:5px;background-color:#fff;border-radius:3px;box-shadow:0 0 7px 1px #a5a5a5}#drag-icon{height:30px;width:280px;margin:0 auto;text-align:center}*{margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/assets/contentPage-CTm-7DtD.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:280px;margin:0 10px;height:460px;padding:5px;background-color:#fff;border-radius:3px;box-shadow:0 0 9px 2px #a5a5a5}#drag-icon{height:30px;width:280px;margin:0 10px;text-align:center}*{margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/assets/contentPage-ChdeVp-S.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:400px;height:400px}
1 change: 1 addition & 0 deletions dist/assets/contentPage-D0McMiJt.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:280px;margin:0 auto;height:450px;padding:5px;background-color:#fff;border-radius:3px;box-shadow:0 0 9px 2px #a5a5a5}#drag-icon{height:30px;width:280px;margin:0 auto;text-align:center}*{margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/assets/contentPage-DW_fr_vG.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:300px;height:500px;background-color:#f0f8ff;border-radius:3px}*{margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/assets/contentPage-DiBmWJ0L.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:270px;height:500px;background-color:#f0f8ff;border-radius:3px;margin-top:30px}#drag-icon{height:30px;text-align:center}*{margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/assets/contentPage-DjRRTzIV.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{margin:0 auto;padding:5px;background-color:#fff;border-radius:3px;box-shadow:0 0 7px 1px #a5a5a5}#drag-icon{height:30px;width:280px;margin:0 auto;text-align:center}*{margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/assets/contentPage-DneYsI6P.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:270px;height:500px;background-color:#f0f8ff;border-radius:3px}#drag-icon{height:30px;text-align:center}*{margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/assets/popup-C_47uO9m.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:400px;height:400px}*{padding:0;margin:0}#app{width:400px;height:400px;background-color:#fff}
1 change: 1 addition & 0 deletions dist/assets/popup-DAawu9P8.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:100px;height:200px}*{padding:0;margin:0}#app{width:400px;height:400px;background-color:#fff}
1 change: 1 addition & 0 deletions dist/assets/popup-UHlCiHYn.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:300px;height:500px}*{padding:0;margin:0}#app{width:400px;height:400px;background-color:#fff}
1 change: 1 addition & 0 deletions dist/assets/popup-cyoQj72q.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*{padding:0;margin:0}#app{width:400px;height:400px}
1 change: 1 addition & 0 deletions dist/assets/popup-m1NjnNZG.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#app{width:100px;height:200px}
1 change: 1 addition & 0 deletions dist/background/service-worker.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions dist/content/content.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

61 changes: 61 additions & 0 deletions dist/contentPage/contentPage.js
View file

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions dist/contentPage/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Measuring Tools</title>
<script type="module" crossorigin src="/contentPage/contentPage.js"></script>
<link rel="modulepreload" crossorigin href="/js/client-C9r4PM53.js">
<link rel="modulepreload" crossorigin href="/js/iframe-B894oyg8.js">
<link rel="stylesheet" crossorigin href="/assets/contentPage-DjRRTzIV.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Expand Down
Binary file added dist/icons/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 40 additions & 0 deletions dist/js/client-C9r4PM53.js
View file

Large diffs are not rendered by default.

40 changes: 40 additions & 0 deletions dist/js/client-Gw-UosAD.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/js/iframe-B894oyg8.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
const i={height:"400px",width:"300px"};export{i};
49 changes: 49 additions & 0 deletions dist/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{
"manifest_version": 3,
"name": "Measuring tools",
"version": "0.0.1",
"description": "测量网页像素",
"icons": {
"16": "icons/icon.png",
"19": "icons/icon.png",
"38": "icons/icon.png",
"48": "icons/icon.png",
"128": "icons/icon.png"
},
"action": {
"default_title": "测量网页像素",
"default_icon": "icons/icon.png",
"default_popup": "popup/index.html"
},
"background": {
"service_worker": "background/service-worker.js"
},
"web_accessible_resources": [
{
"resources": [
"contentPage/*",
"assets/*",
"js/*"
],
"matches": [
"*://*/*"
],
"use_dynamic_url": true
}
],
"permissions": [
"notifications",
"tabs"
],
"host_permissions": [],
"content_scripts": [
{
"js": [
"content/content.js"
],
"matches": [
"*://*/*"
]
}
]
}
15 changes: 15 additions & 0 deletions dist/popup/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Measuring Tools </title>
<script type="module" crossorigin src="/popup/popup.js"></script>
<link rel="modulepreload" crossorigin href="/js/client-C9r4PM53.js">
<link rel="stylesheet" crossorigin href="/assets/popup-m1NjnNZG.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Expand Down
1 change: 1 addition & 0 deletions dist/popup/popup.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/const/iframe.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const iframe= {
height:'400px',
width:'300px',
}
70 changes: 31 additions & 39 deletions src/content/content.ts
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,14 @@
const timeS = "inject-css-D" + Date.now().toString()
enum eventTypes {
close = 'closeMeasureTool',
open = 'openMeasureTool'
}
import { eventTypes } from '../types/eventTypes'
import { iframe } from '../const/iframe'
const timeS = "inject-D" + Date.now().toString()
const style = `
.${timeS}{
outline: 1px solid red;
}
`
let preEl: Element | null = null

console.log('content file')
const init = () => {
const addIframe = (id: string, pagePath: string) => {
const contentIframe = document.createElement("iframe");
contentIframe.id = id;
contentIframe.style.cssText = `width: 300px;
height: 500px;
position: fixed;
z-index: 10000002;
border: none;
top: 10px;
left: 10px;`;
const getContentPage = chrome.runtime.getURL(pagePath);
contentIframe.src = getContentPage;
document.body.appendChild(contentIframe);
}

addIframe('content-start-iframe', 'contentPage/index.html')
}

// 判断 window.top 和 self 是否相等，如果不相等，则不注入 iframe
// if (window.top === window.self) {
// init();
// }
const handleEvent = (event: MouseEvent) => {
const MeasureTools = (event: MouseEvent) => {
let cur = document.elementFromPoint(event.clientX, event.clientY)!
if(cur.tagName === 'IFRAME')return
if (cur !== preEl) {
Expand All @@ -45,17 +19,15 @@ const handleEvent = (event: MouseEvent) => {
}
}
//@ts-ignore
const MeasureTools = (e: string) => {

const handleEvent = (e: string) => {
if (e = eventTypes.open) {
init()
window.addEventListener('mousemove', handleEvent)
window.addEventListener('mousemove', MeasureTools)
} else if (e = eventTypes.close) {
window.removeEventListener('mousemove', handleEvent)
window.removeEventListener('mousemove', MeasureTools)
}
}
//@ts-ignore
const handeCss = (e: string) => {
const handleCss = (e: string) => {
if (e == eventTypes.open) {
const styleEl = document.querySelector(timeS) || window.document.createElement('style')
styleEl.className = timeS
Expand All @@ -66,11 +38,31 @@ const handeCss = (e: string) => {
styleEl && styleEl.remove()
}
}
//@ts-ignore
const handlePage=(e:string)=>{
if(e==eventTypes.open){
const contentIframe =document.querySelector("#"+timeS) as HTMLIFrameElement || document.createElement("iframe");
contentIframe.id =timeS;
contentIframe.style.cssText = `width: ${iframe.width};
height: ${iframe.height};
position: fixed;
z-index: 10000002;
border: none;
top: 10px;
left: 10px;`;
const getContentPage = chrome.runtime.getURL('contentPage/index.html');
contentIframe.src = getContentPage;
document.body.appendChild(contentIframe);
}else if(e==eventTypes.close){
document.querySelector(`#${timeS}`) && document.querySelector(`#${timeS}`)!.remove()
}
}
chrome.runtime.onMessage.addListener((request) => {
//css移出|添加
handeCss(request.info)
handleCss(request.info)
//js关闭|开启
MeasureTools(request.info)

handleEvent(request.info)
//iframe移出|添加
handlePage(request.info)
return undefined
})
2 changes: 0 additions & 2 deletions src/contentPage/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
#app {
width: 280px;
margin: 0 auto;
height: 450px;
padding: 5px;
background-color: rgb(255, 255, 255);
border-radius: 3px;
Expand Down
10 changes: 5 additions & 5 deletions src/contentPage/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import './App.css'
import { iframe } from '../const/iframe';
import { DragOutlined } from '@ant-design/icons';
export default function App() {
const drag = () => {

}
return <>
<div>
<div id='drag-icon'> <DragOutlined onClick={drag} style={{ fontSize: '24px', color: 'rgb(53, 150, 235)', cursor: "grab" }} /></div>
<div id="app">当前元素信息</div>
<div id="app" style={{ width: iframe.width, height: iframe.height }}>
<div id='drag-icon'><DragOutlined onClick={drag} style={{ fontSize: '24px', color: 'rgb(53, 150, 235)', cursor: "grab" }} /></div>
<div>当前元素信息</div>
</div>

</>;
}
1 change: 1 addition & 0 deletions src/popup/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

#app{
width: 100px;
height: 200px;
Expand Down
4 changes: 4 additions & 0 deletions src/types/eventTypes.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export enum eventTypes {
close = 'closeMeasureTool',
open = 'openMeasureTool'
}

0 comments on commit 79f6bfe

Please sign in to comment.