Put search engine CSS in stylesheet

Instead of injecting CSS rules into the original page's stylesheet,
store the IWB styles in a CSS file and add that file to the manifest
scripts.
pull/716/head
SnorlaxMonster 2024-06-11 14:57:56 +09:30 committed by GitHub
parent 4f6d09d832
commit 029dd60a0d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 184 additions and 221 deletions

60
css/content-banners.css Normal file
View File

@ -0,0 +1,60 @@
#indie-wiki-banner-container {
font-family: sans-serif;
width: 100%;
z-index: 2147483647;
position: sticky;
top: 0;
text-align: center;
}
.indie-wiki-banner {
background-color: #acdae2;
padding: 8px 10px;
font-size: 12px;
}
.indie-wiki-banner-exit {
position: absolute;
right: 8px;
top: 4px;
font-size: 20px;
color: #333;
cursor: pointer;
}
.indie-wiki-banner-controls {
padding-bottom: 5px;
}
.indie-wiki-banner-big-text {
font-size: 14px;
line-height: 24px;
margin-top: 5px;
}
.indie-wiki-banner-big-text .indie-wiki-banner-link{
font-size: 16px;
}
.indie-wiki-banner-link {
font-weight: 600;
color: #000080;
cursor: pointer;
padding: 0 10px;
display: block;
width: fit-content;
margin: 0 auto;
}
.indie-wiki-banner-link:hover {
text-decoration: underline;
color: #000080;
}
.indie-wiki-banner-link-small {
display: inline-block;
font-size: 12px;
min-width: 180px;
}
.indie-wiki-banner-disabled {
color: #333;
cursor: default;
}
.indie-wiki-banner-disabled:hover {
text-decoration: none;
}
.indie-wiki-banner-hidden {
display: none;
}

View File

@ -0,0 +1,112 @@
.iwb-notice {
display: block !important;
margin: .5em .5em 1em .5em !important;
padding: .5em .5em .5em 1em !important;
border-left: 3px solid #FFCC33 !important;
font-size: 14px !important;
color: white !important;
mix-blend-mode: difference !important;
}
.iwb-notice a {
text-decoration: underline !important;
color: white !important;
mix-blend-mode: difference !important;
}
.iwb-notice button {
cursor: pointer !important;
display: inline-block !important;
padding: 2px 8px !important;
margin: 8px 8px 0 0 !important;
background-color: transparent !important;
border: 1px solid !important;
border-radius: 5px !important;
font-size: 12px !important;
color: white !important;
mix-blend-mode: difference !important;
text-align: left !important;
}
.iwb-hide {
display: none !important;
}
.iwb-show {
display: block !important;
}
.iwb-notice button:hover {
outline: 1px solid !important;
}
.iwb-new-link-container {
display: inline-block;
font-size: 12px !important;
text-decoration: none;
padding-left: 5px;
position: relative;
}
.iwb-new-link {
display: inline-block;
text-decoration: none;
position: relative;
}
.iwb-new-link:hover {
text-decoration: none;
z-index: 9999999;
}
.iwb-new-link button {
cursor: pointer;
color: white;
background: #005799;
border: 0px solid #fff;
border-radius: 10px;
padding: 5px 10px;
margin: .5em 0;
font-size: 1.2em;
width: fit-content;
}
.iwb-new-link button:hover {
background: #00467a;
}
.iwb-new-link button * {
vertical-align: middle;
}
.iwb-new-link div:first-of-type {
display: inline-block;
background: white;
border-radius: 16px;
margin-right: 10px;
width: fit-content;
height: fit-content;
line-height: 12px;
padding: 5px;
}
.iwb-new-link img {
width: 12px;
}
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) {
opacity: 60%;
pointer-events: none;
cursor: default;
}
.iwb-disavow > a:not([class^="iwb-"]):not(.scs_child_rpr),
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) a,
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) a * {
text-decoration: line-through !important;
}
.iwb-result-controls {
display: inline-block;
margin: .5em;
font-size: 12px;
color: white !important;
mix-blend-mode: difference !important;
}
.iwb-result-controls > div {
display: inline-block;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
padding: 0 1em;
}
.iwb-notice .iwb-result-controls {
margin: 8px 0 0 0;
}

View File

@ -280,6 +280,9 @@
"scripts/common-functions.js", "scripts/common-functions.js",
"scripts/content-search-filtering.js" "scripts/content-search-filtering.js"
], ],
"css": [
"css/content-search-filtering.css"
],
"run_at": "document_end" "run_at": "document_end"
}, },
{ {
@ -311,6 +314,9 @@
"scripts/common-functions.js", "scripts/common-functions.js",
"scripts/content-banners.js" "scripts/content-banners.js"
], ],
"css": [
"css/content-banners.css"
],
"run_at": "document_start" "run_at": "document_start"
}, },
{ {

View File

@ -104,6 +104,9 @@
"scripts/common-functions.js", "scripts/common-functions.js",
"scripts/content-banners.js" "scripts/content-banners.js"
], ],
"css": [
"css/content-banners.css"
],
"run_at": "document_start" "run_at": "document_start"
}, },
{ {
@ -358,6 +361,9 @@
"scripts/common-functions.js", "scripts/common-functions.js",
"scripts/content-search-filtering.js" "scripts/content-search-filtering.js"
], ],
"css": [
"css/content-search-filtering.css"
],
"run_at": "document_end" "run_at": "document_end"
} }
], ],

View File

@ -1,78 +1,6 @@
const breezewikiRegex = /breezewiki\.com$|antifandom\.com$|bw\.artemislena\.eu$|breezewiki\.catsarch\.com$|breezewiki\.esmailelbob\.xyz$|breezewiki\.frontendfriendly\.xyz$|bw\.hamstro\.dev$|breeze\.hostux\.net$|breezewiki\.hyperreal\.coffee$|breeze\.mint\.lgbt$|breezewiki\.nadeko\.net$|nerd\.whatever\.social$|breeze\.nohost\.network$|z\.opnxng\.com$|bw\.projectsegfau\.lt$|breezewiki\.pussthecat\.org$|bw\.vern\.cc$|breeze\.whateveritworks\.org$|breezewiki\.woodland\.cafe$/; const breezewikiRegex = /breezewiki\.com$|antifandom\.com$|bw\.artemislena\.eu$|breezewiki\.catsarch\.com$|breezewiki\.esmailelbob\.xyz$|breezewiki\.frontendfriendly\.xyz$|bw\.hamstro\.dev$|breeze\.hostux\.net$|breezewiki\.hyperreal\.coffee$|breeze\.mint\.lgbt$|breezewiki\.nadeko\.net$|nerd\.whatever\.social$|breeze\.nohost\.network$|z\.opnxng\.com$|bw\.projectsegfau\.lt$|breezewiki\.pussthecat\.org$|bw\.vern\.cc$|breeze\.whateveritworks\.org$|breezewiki\.woodland\.cafe$/;
const currentURL = new URL(document.location); const currentURL = new URL(document.location);
function outputCSS() {
if (!document.getElementById('iwb-banner-styles')) {
styleString = `
#indie-wiki-banner-container {
font-family: sans-serif;
width: 100%;
z-index: 2147483647;
position: sticky;
top: 0;
text-align: center;
}
.indie-wiki-banner {
background-color: #acdae2;
padding: 8px 10px;
font-size: 12px;
}
.indie-wiki-banner-exit {
position: absolute;
right: 8px;
top: 4px;
font-size: 20px;
color: #333;
cursor: pointer;
}
.indie-wiki-banner-controls {
padding-bottom: 5px;
}
.indie-wiki-banner-big-text {
font-size: 14px;
line-height: 24px;
margin-top: 5px;
}
.indie-wiki-banner-big-text .indie-wiki-banner-link{
font-size: 16px;
}
.indie-wiki-banner-link {
font-weight: 600;
color: #000080;
cursor: pointer;
padding: 0 10px;
display: block;
width: fit-content;
margin: 0 auto;
}
.indie-wiki-banner-link:hover {
text-decoration: underline;
color: #000080;
}
.indie-wiki-banner-link-small {
display: inline-block;
font-size: 12px;
min-width: 180px;
}
.indie-wiki-banner-disabled {
color: #333;
cursor: default;
}
.indie-wiki-banner-disabled:hover {
text-decoration: none;
}
.indie-wiki-banner-hidden {
display: none;
}
`
style = document.createElement('style');
style.id = 'iwb-banner-styles';
style.textContent = styleString;
document.head.append(style);
}
}
function outputBannerContainer() { function outputBannerContainer() {
if (!document.getElementById('indie-wiki-banner-container')) { if (!document.getElementById('indie-wiki-banner-container')) {
const container = document.createElement('div'); const container = document.createElement('div');
@ -140,8 +68,6 @@ function processBreezeWikiBanner(storage) {
function displayBreezewikiBanner(newUrl) { function displayBreezewikiBanner(newUrl) {
outputCSS();
// Output banner // Output banner
let banner = document.createElement('div'); let banner = document.createElement('div');
banner.id = 'indie-wiki-banner-bw'; banner.id = 'indie-wiki-banner-bw';
@ -177,8 +103,6 @@ function displayBreezewikiBanner(newUrl) {
} }
function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage, tags, storage) { function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage, tags, storage) {
outputCSS();
// Output banner // Output banner
let banner = document.createElement('div'); let banner = document.createElement('div');
banner.id = 'indie-wiki-banner-redirect'; banner.id = 'indie-wiki-banner-redirect';

View File

@ -24,130 +24,6 @@ function addDOMChangeObserver(callback, searchEngine, storage) {
domObserver.observe(document.body, config); domObserver.observe(document.body, config);
} }
function insertCSS() {
// Output CSS
styleString = `
.iwb-notice {
display: block !important;
margin: .5em .5em 1em .5em !important;
padding: .5em .5em .5em 1em !important;
border-left: 3px solid #FFCC33 !important;
font-size: 14px !important;
color: white !important;
mix-blend-mode: difference !important;
}
.iwb-notice a {
text-decoration: underline !important;
color: white !important;
mix-blend-mode: difference !important;
}
.iwb-notice button {
cursor: pointer !important;
display: inline-block !important;
padding: 2px 8px !important;
margin: 8px 8px 0 0 !important;
background-color: transparent !important;
border: 1px solid !important;
border-radius: 5px !important;
font-size: 12px !important;
color: white !important;
mix-blend-mode: difference !important;
text-align: left !important;
}
.iwb-hide {
display: none !important;
}
.iwb-show {
display: block !important;
}
.iwb-notice button:hover {
outline: 1px solid !important;
}
.iwb-new-link-container {
display: inline-block;
font-size: 12px !important;
text-decoration: none;
padding-left: 5px;
position: relative;
}
.iwb-new-link {
display: inline-block;
text-decoration: none;
position: relative;
}
.iwb-new-link:hover {
text-decoration: none;
z-index: 9999999;
}
.iwb-new-link button {
cursor: pointer;
color: white;
background: #005799;
border: 0px solid #fff;
border-radius: 10px;
padding: 5px 10px;
margin: .5em 0;
font-size: 1.2em;
width: fit-content;
}
.iwb-new-link button:hover {
background: #00467a;
}
.iwb-new-link button * {
vertical-align: middle;
}
.iwb-new-link div:first-of-type {
display: inline-block;
background: white;
border-radius: 16px;
margin-right: 10px;
width: fit-content;
height: fit-content;
line-height: 12px;
padding: 5px;
}
.iwb-new-link img {
width: 12px;
}
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) {
opacity: 60%;
pointer-events: none;
cursor: default;
}
.iwb-disavow > a:not([class^="iwb-"]):not(.scs_child_rpr),
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) a,
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) a * {
text-decoration: line-through !important;
}
.iwb-result-controls {
display: inline-block;
margin: .5em;
font-size: 12px;
color: white !important;
mix-blend-mode: difference !important;
}
.iwb-result-controls > div {
display: inline-block;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
padding: 0 1em;
}
.iwb-notice .iwb-result-controls {
margin: 8px 0 0 0;
}
`
style = document.createElement('style');
style.classList.add('iwb-styles');
style.textContent = styleString;
document.head.append(style);
}
// Function to convert strings to consistent IDs // Function to convert strings to consistent IDs
// Used to convert wiki names to element IDs // Used to convert wiki names to element IDs
function stringToId(string) { function stringToId(string) {
@ -448,27 +324,6 @@ async function filterSearchResult(matchingSite, searchResult, searchEngine, coun
searchFilterSetting = storage.defaultSearchAction; searchFilterSetting = storage.defaultSearchAction;
} }
// Output stylesheet if not already done
if (!document.querySelector('.iwb-styles')) {
const headElement = document.querySelector('head');
if (headElement) {
insertCSS();
} else {
// If head element doesn't exist, wait for it via MutationObserver
const docObserver = new MutationObserver((mutations, mutationInstance) => {
const headElement = document.querySelector('head');
if (headElement && !document.querySelector('.iwb-styles')) {
insertCSS();
mutationInstance.disconnect();
}
});
docObserver.observe(document, {
childList: true,
subtree: true
});
}
}
const searchResultContainer = getSearchContainer(searchEngine, searchResult); const searchResultContainer = getSearchContainer(searchEngine, searchResult);
if (searchResultContainer) { if (searchResultContainer) {