1.修复了刷新网页会出现重复的m3u8链接的问题

2.删除无用的文件，调整目录结构 3.调整了提示，提示变得友好
Leenshady · May 7, 2022 · 2c418fb · 2c418fb
1 parent 848a1a1
commit 2c418fb
Show file tree

Hide file tree

Showing 18 changed files with 86 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # m3u8Sniffer
 ## 中文  
-一个可以扫描页面m3u8链接的Chrome扩展。  
+一个可以嗅探网页发起的m3u8链接请求的Chrome扩展。  
 
 ## English  
-A Chrome plug-in that scans the m3u8 link in a web page.  
+A Chrome extension that can sniff requests for m3u8 links from web pages.  
 
 
-![image](https://user-images.githubusercontent.com/27936579/109785249-e830cf80-7c46-11eb-8a89-e015ee18ae20.png)
+![image](img/img1.jpg)
 
-![image](https://user-images.githubusercontent.com/27936579/109785314-f848af00-7c46-11eb-91be-a59cb4df8b4b.png)
+![image](img/img2.jpg)
+
+![image](img/img3.png)
 
 Manifest V3版本：https://github.com/Leenshady/m3u8Sniffer2  
diff --git a/background.html b/background.html
@@ -3,14 +3,8 @@
 <head>
     <meta charset="utf-8"/>
     <title>background</title>
-    <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/background.js"></script>
 </head>
-<body style="width:300px;min-height:150px;">
-    <h3>m3u8Sniffer</h3>
-    <div id="box" class="box" style="width:250px;min-height:100px;margin:20px auto;padding: 15px;border:gray solid 1px;">
-        <div style="width: 250px;margin-top: 5px;"><span style="width: 200px;">main.m3u8</span><a href="#" style="float: right;">复制</a></div>
-        <div style="width: 250px;margin-top: 5px;"><span style="width: 200px;">main.m3u8</span><a href="#" style="float: right;">复制</a></div>
-    </div>
+<body>
 </body>
 </html>
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/bootstrap.min.css.map b/css/bootstrap.min.css.map
diff --git a/img/icon_128.png → icon/icon_128.png b/img/icon_128.png → icon/icon_128.png
diff --git a/img/icon_16.png → icon/icon_16.png b/img/icon_16.png → icon/icon_16.png
diff --git a/img/icon_19.png → icon/icon_19.png b/img/icon_19.png → icon/icon_19.png
diff --git a/img/icon_32.png → icon/icon_32.png b/img/icon_32.png → icon/icon_32.png
diff --git a/img/icon_48.png → icon/icon_48.png b/img/icon_48.png → icon/icon_48.png
diff --git a/img/img1.jpg b/img/img1.jpg
diff --git a/img/img2.jpg b/img/img2.jpg
diff --git a/img/img3.png b/img/img3.png
diff --git a/js/background.js b/js/background.js
@@ -1,24 +1,30 @@
-var m3u8list=[];
-var filename=[];
 var tabs={};
 var pattern = /http[s]?[://]{1}[-A-Za-z0-9+&@#/%?=~_|!:,.;]*[-A-Za-z0-9+&@#/%=~_|]*.m3u8$/
+//拦截网络请求
 chrome.webRequest.onBeforeSendHeaders.addListener(details => {
     var tmp;
+    //去除url中的参数
     if(/\?/.test(details.url)){
         tmp = details.url.slice(0,details.url.indexOf("?"));
     }else{
         tmp = details.url;
     }
     //console.log(details.url);
     //console.log(tmp);
+    //匹配m3u8链接
 	if(pattern.test(tmp)){
-        console.log(details.tabId);
+        //console.log(details.tabId);
+        //如果tabs[tabId]不存在，先新建
         if(!(details.tabId in tabs)){
             tabs[details.tabId] ={};
             tabs[details.tabId].m3u8list=[];
-            tabs[details.tabId].filename=[];
         }
-        tabs[details.tabId].m3u8list.push(details.url);
-        tabs[details.tabId].filename.push(tmp.slice(tmp.lastIndexOf("/")+1,tmp.length));
+        //插入数组
+        var m3u8 = {name:tmp.slice(tmp.lastIndexOf("/")+1,tmp.length),url:details.url}
+        //去重
+        if(!tabs[details.tabId].m3u8list.some(item=>item.url===details.url)){
+            tabs[details.tabId].m3u8list.push(m3u8);
+        }
+        //tabs[details.tabId].filename.push(tmp.slice(tmp.lastIndexOf("/")+1,tmp.length));
     }
 }, {urls: ["<all_urls>"]},["requestHeaders"]);
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js
diff --git a/js/content-script.js b/js/content-script.js
diff --git a/js/popup.js b/js/popup.js
@@ -1,23 +1,29 @@
-var tabID;
 $(function(){
+    //获取background,方便访问background的变量
     var bg = chrome.extension.getBackgroundPage();
     chrome.tabs.getSelected(null, function (tab) { // 先获取当前页面的tabID
-        tabID = tab.id;
-        console.log(tabID)
-        for(i=0;i<bg.tabs[tabID].filename.length;i++){
-            $("#box").append('<div id=url'+i+' style="width: 250px;margin-top: 5px;"><span style="width: 200px;">'+bg.tabs[tabID].filename[i]+'</span><a href="#" style="float: right;">复制</a></div>');
-            $("#url"+i).click({"url":bg.tabs[tabID].m3u8list[i]},copyUrl);
+        var tabID = tab.id;
+        //console.log(tabID)
+        //判空
+        if(bg.tabs==undefined || bg.tabs[tabID]==undefined || bg.tabs[tabID].m3u8list==undefined){
+            $(".alert-warning").addClass("show")
+            $(".alert-warning").removeAttr("hidden")
+        }else{
+            for(i=0;i<bg.tabs[tabID].m3u8list.length;i++){
+                $("#box").append('<div id="url'+i+'" style="mt-1 mb-1"><span style="max-width: 200px;white-space: nowrap;display: inline-block;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;">'+bg.tabs[tabID].m3u8list[i].name+'</span><a href="#" style="float: right;">复制</a></div>');
+                $("#url"+i).click({"url":bg.tabs[tabID].m3u8list[i].url},copyUrl);
+            }
         }
      });
 })
 
-function copyUrl(obj){
-    var oInput = document.createElement('input');
-    oInput.value = obj.data.url;
-    document.body.appendChild(oInput);
-    oInput.select(); // 选择对象
-    document.execCommand("Copy"); // 执行浏览器复制命令
-    oInput.className = 'oInput';
-    oInput.style.display='none';
-    alert('复制成功');
+//复制链接到剪切板
+function copyUrl(obj) {
+    navigator.clipboard.writeText(obj.data.url);
+    $(".alert-success").addClass("show")
+    $(".alert-success").removeAttr("hidden")
+    window.setTimeout(function(){
+        $(".alert-success").removeClass("show")
+        $(".alert-success").attr("hidden","hidden")
+    },2000);//2秒后消失
 }
diff --git a/manifest.json b/manifest.json
@@ -1,17 +1,17 @@
 {
     "manifest_version": 2,
-    "name": "m3u8Sniffer",
-    "version": "1.0.0",
-    "description": "m3u8嗅探器，可以列出页面的m3u8文件",
+    "name": "m3u8 Sniffer",
+    "version": "1.1.0",
+    "description": "一个可以嗅探网页m3u8链接请求的扩展",
     "icons":
     {
-        "16": "img/icon_16.png",
-        "48": "img/icon_48.png",
-        "128": "img/icon_128.png"
+        "16": "icon/icon_16.png",
+        "48": "icon/icon_48.png",
+        "128": "icon/icon_128.png"
     },
     "browser_action": 
 	{
-		"default_icon": "img/icon_19.png",
+		"default_icon": "icon/icon_19.png",
 		"default_popup": "popup.html"
 	},
     "permissions":

diff --git a/popup.html b/popup.html
@@ -2,14 +2,33 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>m3u8Sniffer</title>
+    <title>m3u8Sniffer2</title>
+    <link rel="stylesheet" href="css/bootstrap.min.css">
     <script type="text/javascript" src="js/jquery.min.js"></script>
+    <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/popup.js"></script>
+    <style>
+        .btn:focus{
+            box-shadow:none!important;   
+        }
+    </style>
 </head>
-<body style="width:300px;min-height:150px;">
-    <h3>m3u8Sniffer</h3>
-    <div id="box" class="box" style="width:250px;min-height:100px;margin:20px auto;padding: 15px;border:gray solid 1px;">
-
+<body style="width:300px;min-height:150px;" class="container">
+    <div class="col-12 mt-1">
+        <h5>m3u8Sniffer</h5>
+    </div>
+    <div class="row card mb-2 ms-0 me-0">
+        <div class="col-12 card-body">
+            <div id="box" class="box card-text" style="min-height:110px;">
+                <!-- <div class="mt-1 mb-1"><span style="max-width: 200px;">index.m3u8</span><a href="#" style="float: right;">复制</a></div> -->
+            </div>
+        </div>
+    </div>
+    <div class="alert alert-success fade hide" style="padding:5px 20px 5px 20px;line-height:14px;font-size: 14px;" hidden>
+        复制成功!
+    </div>
+    <div class="alert alert-warning fade hide" style="padding:5px 20px 5px 20px;line-height:14px;font-size: 14px;" hidden>
+        当前网页没有m3u8链接请求！
     </div>
 </body>
 </html>