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
parent
4f6d09d832
commit
029dd60a0d
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
|
@ -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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue