add Sponsor button

This commit is contained in:
qcrao
2023-10-20 11:33:13 +08:00
parent 1f236564d6
commit f0d9878a94
4 changed files with 58 additions and 11 deletions

5
background.js Normal file
View File

@@ -0,0 +1,5 @@
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === "openTab") {
chrome.tabs.create({url: message.url});
}
});

View File

@@ -13,8 +13,12 @@
}, },
"permissions": [ "permissions": [
"scripting", "scripting",
"activeTab" "activeTab",
"tabs"
], ],
"background": {
"service_worker": "background.js"
},
"content_scripts": [ "content_scripts": [
{ {
"matches": [ "matches": [

View File

@@ -79,6 +79,15 @@ body {
text-align: center; text-align: center;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding-top: 10px; padding-top: 10px;
display: flex; /* 添加这一行使得.footer下的直接子元素并排排列 */
justify-content: center; /* 使得子元素在中心对齐 */
gap: 10px; /* 如果需要,可以添加这一行以在子元素之间创建一些空间 */
}
.footer button {
font-size: inherit; /* 这行代码使按钮的字体大小继承自其父元素,即.footer */
background-color: #383E46;
border-color: #78838F;
} }
button#remove-checkboxes { button#remove-checkboxes {
@@ -91,3 +100,24 @@ body {
border-color: #2758ab; border-color: #2758ab;
} }
#sponsorLink {
display: inline-flex;
align-items: center;
padding: 10px 20px;
background-color: #383E46;
border-color: #78838F;
border-radius: 5px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
#sponsorLink .icon-text {
display: flex;
align-items: center;
}
#sponsorLink:hover {
background-color: #993366;
}

View File

@@ -18,9 +18,17 @@
<button id="toggle-checkboxes">Toggle Checkboxes</button> <button id="toggle-checkboxes">Toggle Checkboxes</button>
<button id="bulk-delete">Bulk Delete</button> <button id="bulk-delete">Bulk Delete</button>
</div> </div>
<div class="footer"> <div class="footer">
<a href="https://github.com/sponsors/qcrao" target="_blank" id="sponsorLink">
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart icon-sponsor mr-1 v-align-middle color-fg-sponsors anim-pulse-in" style="fill: #BC6796; vertical-align: middle;">
<path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path>
</svg>
&nbsp;Sponsor
</a>
<p id="copyright"></p> <p id="copyright"></p>
</div> </div>
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>
</html> </html>