Skip to content

Commit b252893

Browse files
LookRainLookRain
committed
add alternative video el id for douyu
1 parent 27d37f5 commit b252893

14 files changed

+134
-66
lines changed

‎background.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// found in the LICENSE file.
44

55
'use strict';
6-
const paths = ['douyu.com', 'huya.com', 'huomao.com'];
6+
const paths = ['com'];
77
const genConditions = (list) => {
88
return list.map((word) => {
99
return new chrome.declarativeContent.PageStateMatcher({

‎images/get_started128.png

-2.75 KB
Binary file not shown.

‎images/get_started16.png

-495 Bytes
Binary file not shown.

‎images/get_started32.png

-814 Bytes
Binary file not shown.

‎images/get_started48.png

-1.2 KB
Binary file not shown.

‎images/player128.png

2.53 KB
Loading

‎images/player16.png

542 Bytes
Loading

‎images/player32.png

813 Bytes
Loading

‎images/player48.png

1.39 KB
Loading

‎manifest.json

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
{
2-
"name": "Getting Started Example",
3-
"version": "1.0",
4-
"description": "Build an Extension!",
5-
"permissions": ["activeTab", "declarativeContent", "storage"],
6-
"options_page": "options.html",
2+
"name": "悬浮画中画播放器",
3+
"version": "1.11",
4+
"description": "使用chrome提供的picture-in-picture api让直播以画中画模式播放。 目前支持斗鱼，虎牙,火猫直播以及各种使用html5播放器的网站。",
5+
"permissions": ["activeTab", "declarativeContent"],
76
"background": {
87
"scripts": ["background.js"],
98
"persistent": false
109
},
1110
"page_action": {
1211
"default_popup": "popup.html",
1312
"default_icon": {
14-
"16": "images/get_started16.png",
15-
"32": "images/get_started32.png",
16-
"48": "images/get_started48.png",
17-
"128": "images/get_started128.png"
13+
"16": "images/player16.png",
14+
"32": "images/player32.png",
15+
"48": "images/player48.png",
16+
"128": "images/player128.png"
1817
}
1918
},
2019
"icons": {
21-
"16": "images/get_started16.png",
22-
"32": "images/get_started32.png",
23-
"48": "images/get_started48.png",
24-
"128": "images/get_started128.png"
20+
"16": "images/player16.png",
21+
"32": "images/player32.png",
22+
"48": "images/player48.png",
23+
"128": "images/player128.png"
2524
},
2625
"manifest_version": 2
2726
}

‎options.html

-21
This file was deleted.

‎options.js

-21
This file was deleted.

‎popup.html

+86-2
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,100 @@
11
<!DOCTYPE html>
2+
<meta charset="utf-8">
23
<html>
34
<head>
45
<style>
6+
.root {
7+
width: 130px;
8+
height: 50px;
9+
}
10+
.btn {
11+
position: relative;
12+
13+
display: block;
14+
margin: 30px auto;
15+
padding: 0;
16+
17+
overflow: hidden;
18+
19+
border-width: 0;
20+
outline: none;
21+
border-radius: 2px;
22+
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
23+
24+
background-color: #3f51b5;
25+
color: #ecf0f1;
26+
27+
transition: background-color .3s;
28+
}
29+
30+
.btn:hover, .btn:focus {
31+
background-color: #2c387e;
32+
}
33+
34+
.btn > * {
35+
position: relative;
36+
}
37+
38+
.btn span {
39+
display: block;
40+
padding: 12px 24px;
41+
}
42+
43+
.btn:before {
44+
content: "";
45+
46+
position: absolute;
47+
top: 50%;
48+
left: 50%;
49+
50+
display: block;
51+
width: 0;
52+
padding-top: 0;
53+
54+
border-radius: 100%;
55+
56+
background-color: rgba(236, 240, 241, .3);
57+
58+
-webkit-transform: translate(-50%, -50%);
59+
-moz-transform: translate(-50%, -50%);
60+
-ms-transform: translate(-50%, -50%);
61+
-o-transform: translate(-50%, -50%);
62+
transform: translate(-50%, -50%);
63+
}
64+
65+
.btn:active:before {
66+
width: 120%;
67+
padding-top: 120%;
68+
69+
transition: width .2s ease-out, padding-top .2s ease-out;
70+
}
71+
72+
/* Styles, not important */
73+
*, *:before, *:after {
74+
box-sizing: border-box;
75+
}
76+
77+
body {
78+
background-color: #ecf0f1;
79+
color: #34495e;
80+
font-family: Trebuchet, Arial, sans-serif;
81+
text-align: center;
82+
}
83+
84+
h2 {
85+
font-weight: normal;
86+
}
587
button {
688
height: 30px;
7-
width: 30px;
89+
width: 100px;
890
outline: none;
991
}
1092
</style>
1193
</head>
1294
<body>
13-
<button id="submitPipRequest">使用悬浮播放器</button>
95+
<div class="root">
96+
<button class="btn" id="submitPipRequest">使用悬浮播放器</button>
97+
</div>
1498
<script src="popup.js"></script>
1599
</body>
16100
</html>

‎popup.js

+35-8
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,41 @@
44

55
'use strict';
66

7-
const script = `let id;
8-
const orgin = document.location.origin;
9-
if (origin.includes('douyu')) id = '__video';
10-
if (origin.includes('huya')) id = 'huya_video';
11-
if (origin.includes('huomao')) id = 'live-video';
12-
console.log(id);
13-
document.getElementById(id).requestPictureInPicture();
14-
document.getElementById(id).play();`;
7+
8+
9+
const script = `
10+
if (document.location.origin.includes('douyu')) {
11+
try {
12+
document.querySelector('[id^="__video"]').requestPictureInPicture();
13+
document.querySelector('[id^="__video"]').play();
14+
} catch (err) {
15+
document.querySelector('video').requestPictureInPicture();
16+
document.querySelector('video').play();
17+
}
18+
}
19+
else if (document.location.origin.includes('huya')) {
20+
try {
21+
document.getElementById('huya_video').requestPictureInPicture();
22+
document.getElementById('huya_video').play();
23+
} catch (err) {
24+
document.querySelector('video').requestPictureInPicture();
25+
document.querySelector('video').play();
26+
}
27+
}
28+
else if (document.location.origin.includes('huomao')) {
29+
try {
30+
document.getElementById('live-video').requestPictureInPicture();
31+
document.getElementById('live-video').play();
32+
} catch (err) {
33+
document.querySelector('video').requestPictureInPicture();
34+
document.querySelector('video').play();
35+
}
36+
}
37+
else {
38+
document.querySelector('video').requestPictureInPicture();
39+
document.querySelector('video').play();
40+
}
41+
`;
1542

1643
submitPipRequest.onclick = function(element) {
1744
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

0 commit comments

Comments
 (0)