css styling updated, added check for user mobile

This commit is contained in:
yoNico21 2024-10-17 17:58:54 +02:00
parent 3999bb29f9
commit 7cf21348bf
18 changed files with 367 additions and 254 deletions

View File

@ -20,13 +20,13 @@
"use strict";
const DEBUG = false;
const DEBUG = true;
// Use chrome or browser depending on the environment
const browser = chrome || browser;
// Custom user-agent to spoof Googlebot
const user_agent =
let user_agent =
"Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
const target_urls = "*://*/*";
@ -43,6 +43,38 @@ browser.storage.sync
console.error("Error setting duration:", error);
});
function check_user_agent() {
// On active tab execute script
browser.tabs
.query({ active: true, currentWindow: true })
.then((tabs) => {
browser.scripting.executeScript({
target: { tabId: tabs[0].id },
files: ["checkUser.js"],
});
})
.catch((error) => {
console.error(`Failed to execute script: ${error}`);
});
}
function if_user_agent_mobile() {
// Get boolean from storage
browser.storage.sync.get("isMobile").then((result) => {
if (result.isMobile) {
if (DEBUG)
console.log("User is on a mobile device, changing userAgent.");
user_agent =
"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
if (DEBUG) console.log("User-Agent set to mobile device.");
if (DEBUG) console.log("User-Agent:", user_agent);
} else {
if (DEBUG)
console.log("User is not on a mobile device. Continuing...");
}
});
}
// Set extension status to ON
function set_extension_status_ON() {
browser.storage.sync
@ -56,6 +88,14 @@ function set_extension_status_ON() {
title: "You are now surfing the web as a bot 🤖",
});
})
.then(() => {
// Check if the user is on a mobile device
check_user_agent();
})
.then(() => {
// If the user is on a mobile device change the user-agent
if_user_agent_mobile();
})
.then(() => {
// Start user-agent spoofing
return startUserAgentSpoofing();
@ -183,14 +223,21 @@ function stopUserAgentSpoofing() {
function refreshAllTabs() {
return browser.tabs.query({}).then((tabs) => {
tabs.forEach((tab) => {
browser.tabs
.reload(tab.id)
.then(() => {
if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
})
.catch((error) => {
console.error(`Error refreshing tab ${tab.id}:`, error);
});
if (tab.url.startsWith("https://")) {
browser.tabs
.reload(tab.id)
.then(() => {
if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
})
.catch((error) => {
console.error(`Error refreshing tab ${tab.id}:`, error);
});
} else {
if (DEBUG)
console.log(
`Skipped refreshing tab ${tab.id} (URL does not start with "https://")`
);
}
});
});
}
@ -215,20 +262,24 @@ function injectContentScript() {
`Content script injected into tab ${tab.id}`
);
// Use a hardcoded duration for removal
const duration = 80000; // 8 seconds or whatever you need
// Set a timeout to remove the content after the hardcoded duration
setTimeout(() => {
browser.storage.sync.set({
bannerInjected: true,
});
browser.storage.sync
.set({
bannerInjected: true,
})
.then(() => {
if (DEBUG)
console.log(
"Banner injected flag set to true."
);
});
if (DEBUG)
console.log(
"Duration expired. Removing content."
);
removeInjectedContent(); // Ensure this is defined
}, duration);
}, DISPLAY_DURATION);
})
.catch((error) => {
console.error(

View File

@ -20,13 +20,13 @@
"use strict";
const DEBUG = false;
const DEBUG = true;
// Use chrome or browser depending on the environment
const browser = chrome || browser;
// Custom user-agent to spoof Googlebot
const user_agent =
let user_agent =
"Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
const target_urls = "*://*/*";
@ -43,6 +43,38 @@ browser.storage.sync
console.error("Error setting duration:", error);
});
function check_user_agent() {
// On active tab execute script
browser.tabs
.query({ active: true, currentWindow: true })
.then((tabs) => {
browser.scripting.executeScript({
target: { tabId: tabs[0].id },
files: ["checkUser.js"],
});
})
.catch((error) => {
console.error(`Failed to execute script: ${error}`);
});
}
function if_user_agent_mobile() {
// Get boolean from storage
browser.storage.sync.get("isMobile").then((result) => {
if (result.isMobile) {
if (DEBUG)
console.log("User is on a mobile device, changing userAgent.");
user_agent =
"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
if (DEBUG) console.log("User-Agent set to mobile device.");
if (DEBUG) console.log("User-Agent:", user_agent);
} else {
if (DEBUG)
console.log("User is not on a mobile device. Continuing...");
}
});
}
// Set extension status to ON
function set_extension_status_ON() {
browser.storage.sync
@ -56,6 +88,14 @@ function set_extension_status_ON() {
title: "You are now surfing the web as a bot 🤖",
});
})
.then(() => {
// Check if the user is on a mobile device
check_user_agent();
})
.then(() => {
// If the user is on a mobile device change the user-agent
if_user_agent_mobile();
})
.then(() => {
// Start user-agent spoofing
return startUserAgentSpoofing();
@ -183,14 +223,21 @@ function stopUserAgentSpoofing() {
function refreshAllTabs() {
return browser.tabs.query({}).then((tabs) => {
tabs.forEach((tab) => {
browser.tabs
.reload(tab.id)
.then(() => {
if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
})
.catch((error) => {
console.error(`Error refreshing tab ${tab.id}:`, error);
});
if (tab.url.startsWith("https://")) {
browser.tabs
.reload(tab.id)
.then(() => {
if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
})
.catch((error) => {
console.error(`Error refreshing tab ${tab.id}:`, error);
});
} else {
if (DEBUG)
console.log(
`Skipped refreshing tab ${tab.id} (URL does not start with "https://")`
);
}
});
});
}
@ -215,20 +262,24 @@ function injectContentScript() {
`Content script injected into tab ${tab.id}`
);
// Use a hardcoded duration for removal
const duration = 80000; // 8 seconds or whatever you need
// Set a timeout to remove the content after the hardcoded duration
setTimeout(() => {
browser.storage.sync.set({
bannerInjected: true,
});
browser.storage.sync
.set({
bannerInjected: true,
})
.then(() => {
if (DEBUG)
console.log(
"Banner injected flag set to true."
);
});
if (DEBUG)
console.log(
"Duration expired. Removing content."
);
removeInjectedContent(); // Ensure this is defined
}, duration);
}, DISPLAY_DURATION);
})
.catch((error) => {
console.error(

View File

@ -26,7 +26,7 @@ var user_agent =
var target_urls = "*://*/*";
var status = 0;
const DEBUG = false; // Set to true to enable debug mode
const DEBUG = true; // Set to true to enable debug mode
// Duration to display the injected HTML (in milliseconds)
const DISPLAY_DURATION = 8000; // Set to 8 seconds
@ -137,16 +137,23 @@ function removeInjectedContent() {
function refreshAllTabs() {
browser.tabs.query({}, (tabs) => {
tabs.forEach((tab) => {
browser.tabs.reload(tab.id, () => {
if (browser.runtime.lastError) {
console.error(
`Error refreshing tab ${tab.id}:`,
browser.runtime.lastError
if (tab.url.startsWith("https://")) {
browser.tabs.reload(tab.id, () => {
if (browser.runtime.lastError) {
console.error(
`Error refreshing tab ${tab.id}:`,
browser.runtime.lastError
);
} else {
if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
}
});
} else {
if (DEBUG)
console.log(
`Skipped refreshing tab ${tab.id} (URL does not start with https://)`
);
} else {
if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
}
});
}
});
});
}
@ -158,7 +165,11 @@ function set_extension_status_ON() {
browser.browserAction.setTitle({
title: "You are now surfing the web as a bot 🤖",
});
injectContentScript();
refreshAllTabs();
setTimeout(() => {
injectContentScript();
}, 500);
}
function set_extension_status_OFF() {

View File

@ -0,0 +1,35 @@
function isAgentMobile() {
const regex =
/Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
return regex.test(navigator.userAgent);
}
function hasTouchSupport() {
return "ontouchstart" in window || navigator.maxTouchPoints > 0;
}
function isMobileScreen() {
const minWidth = 768; // Minimum width for desktop devices
return window.innerWidth < minWidth || screen.width < minWidth;
}
function isMobile() {
// Check if at least 2 of the 3 conditions are true
const isMobileAgent = isAgentMobile(); // Renamed variable to avoid conflict
const touchSupport = hasTouchSupport(); // Renamed variable to avoid conflict
const mobileScreen = isMobileScreen(); // Renamed variable to avoid conflict
const conditions = [isMobileAgent, touchSupport, mobileScreen];
const trueConditions = conditions.filter((condition) => condition);
return trueConditions.length >= 2; // Return true if at least 2 conditions are true
}
const user = isMobile();
// Check if the user is on a mobile device
if (user) {
if (DEBUG) console.log("User is on a mobile device, changing userAgent.");
browser.storage.sync.set({ isMobile: user });
}

View File

@ -5,7 +5,7 @@ let DEBUG; // Declare the DEBUG variable in the outer scope
browser.storage.sync.get("debug").then((result) => {
DEBUG = result.debug;
console.log("DEBUG mode:", DEBUG);
if (DEBUG) console.log("DEBUG mode:", DEBUG);
});
// Duration to show the banner (in milliseconds)
@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
function injectCSS() {
// Inject the CSS file
const link = document.createElement("link");
link.href = browser.runtime.getURL("style.css");
link.href = browser.runtime.getURL("rtbh_style.css");
link.rel = "stylesheet";
document.head.appendChild(link);
@ -48,17 +48,15 @@ function injectCSS() {
function createBanner() {
// Create the banner container
const banner = document.createElement("div");
banner.classList.add("extension-banner-container");
banner.classList.add("banner");
const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
const bannerContent = `
<div class="banner montserrat">
<div class="marquee">
<span class="marquee__inner" style="--ad: 80s;">
${new Array(30).fill(marqeeText).join("")}
</span>
</div>
<div class="marquee">
<span class="marquee__inner" style="--ad: 60s;">
${new Array(30).fill(marqeeText).join("")}
</span>
</div>
`;
@ -80,7 +78,7 @@ function removeBanner() {
if (DEBUG) console.log("Banner removed after duration.");
// Remove the injected CSS file
const link = document.querySelector('link[href$="style.css"]'); // Match any href ending with "style.css"
const link = document.querySelector('link[href$="rtbh_style.css"]'); // Match any href ending with "rtbh_style.css"
link.parentNode.removeChild(link);
}
}, DISPLAY_DURATION);

View File

@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
function injectCSS() {
// Inject the CSS file
const link = document.createElement("link");
link.href = browser.runtime.getURL("style.css");
link.href = browser.runtime.getURL("rtbh_style.css");
link.rel = "stylesheet";
document.head.appendChild(link);
@ -48,17 +48,15 @@ function injectCSS() {
function createBanner() {
// Create the banner container
const banner = document.createElement("div");
banner.classList.add("extension-banner-container");
banner.classList.add("banner");
const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
const bannerContent = `
<div class="banner montserrat">
<div class="marquee">
<span class="marquee__inner" style="--ad: 80s;">
${new Array(30).fill(marqeeText).join("")}
</span>
</div>
<div class="marquee">
<span class="marquee__inner" style="--ad: 60s;">
${new Array(30).fill(marqeeText).join("")}
</span>
</div>
`;
@ -80,7 +78,7 @@ function removeBanner() {
if (DEBUG) console.log("Banner removed after duration.");
// Remove the injected CSS file
const link = document.querySelector('link[href$="style.css"]'); // Match any href ending with "style.css"
const link = document.querySelector('link[href$="rtbh_style.css"]'); // Match any href ending with "rtbh_style.css"
link.parentNode.removeChild(link);
}
}, DISPLAY_DURATION);

View File

@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
function injectCSS() {
// Inject the CSS file
const link = document.createElement("link");
link.href = browser.runtime.getURL("style.css");
link.href = browser.runtime.getURL("rtbh_style.css");
link.rel = "stylesheet";
document.head.appendChild(link);
@ -48,17 +48,15 @@ function injectCSS() {
function createBanner() {
// Create the banner container
const banner = document.createElement("div");
banner.classList.add("extension-banner-container");
banner.classList.add("banner");
const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
const bannerContent = `
<div class="banner montserrat">
<div class="marquee">
<span class="marquee__inner" style="--ad: 80s;">
${new Array(30).fill(marqeeText).join("")}
</span>
</div>
<div class="marquee">
<span class="marquee__inner" style="--ad: 60s;">
${new Array(30).fill(marqeeText).join("")}
</span>
</div>
`;
@ -118,7 +116,7 @@ function createBanner() {
// Remove the injected CSS file
const link = document.querySelector(
'link[href="style.css"]'
'link[href="rtbh_style.css"]'
);
if (link) {
link.parentNode.removeChild(link); // Corrected to remove the link

View File

@ -1,10 +1,13 @@
{
"name": "Refuse to be Human — Surf the Web as Googlebot",
"short_name": "Refuse to be Human",
"version": "0.0.3",
"version": "0.0.4",
"description": "Surf the Web as Googlebot. Ever wondered what the Googlebot gets to see online that you do not?",
"homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
"manifest_version": 3,
"icons": {
"48": "icon_ON_48.png"
},
"background": {
"service_worker": "background.js"
},
@ -29,10 +32,11 @@
"<all_urls>"
],
"js": [
"content.js"
"content.js",
"checkUser.js"
],
"css": [
"style.css"
"rtbh_style.css"
],
"run_at": "document_idle"
}
@ -40,7 +44,8 @@
"web_accessible_resources": [
{
"resources": [
"style.css"
"rtbh_style.css",
"fonts/*"
],
"matches": [
"<all_urls>"

View File

@ -1,10 +1,13 @@
{
"name": "Refuse to be Human — Surf the Web as Googlebot",
"short_name": "Refuse to be Human",
"version": "0.0.3",
"version": "0.0.4",
"description": "Surf the Web as Googlebot. Ever wondered what the Googlebot gets to see online that you do not?",
"homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
"manifest_version": 3,
"icons": {
"48": "icon_ON_48.png"
},
"background": {
"service_worker": "background.js"
},
@ -29,10 +32,11 @@
"<all_urls>"
],
"js": [
"content.js"
"content.js",
"checkUser.js"
],
"css": [
"style.css"
"rtbh_style.css"
],
"run_at": "document_idle"
}
@ -40,7 +44,8 @@
"web_accessible_resources": [
{
"resources": [
"style.css"
"rtbh_style.css",
"fonts/*"
],
"matches": [
"<all_urls>"

View File

@ -2,6 +2,9 @@
"homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
"name": "Refuse to be Human — Surf the Web as Googlebot",
"short_name": "Refuse to be Human",
"icons": {
"48": "icon_ON_48.png"
},
"browser_specific_settings": {
"gecko": {
"id": "trash@bitnik.org",
@ -9,13 +12,16 @@
}
},
"description": "Surf the Web as Googlebot. Ever wondered what the Googlebot gets to see online that you do not?",
"version": "0.0.3",
"version": "0.0.4",
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"web_accessible_resources": [
"fonts/*"
],
"permissions": [
"tabs",
"activeTab",

View File

@ -7,7 +7,7 @@ export_folder="packaged"
extension_name="refused_to_be_human"
# Files to include in the package
include_files="background.js content.js icon_OFF_48.png icon_ON_48.png manifest.json style.css"
include_files="fonts/texgyreheros-bolditalic.woff background.js checkUser.js content.js icon_OFF_48.png icon_ON_48.png LICENSE manifest.json rtbh_style.css"
# Get the current version using jq to parse JSON (if jq is available)
current_version=$(jq -r '.version' manifest.json)

View File

@ -0,0 +1,126 @@
@font-face {
font-family: "TeXGyreHeros-BoldItalic";
font-style: normal;
font-weight: 900;
src: url("fonts/texgyreheros-bolditalic.woff") format("woff");
}
:root {
--banner-bg-color: black;
--banner-color: white;
--bg: #8f8f8f;
}
.banner {
background: var(--banner-bg-color);
color: var(--banner-color);
position: fixed;
padding: 1rem;
z-index: 40;
font-family: "TeXGyreHeros-BoldItalic";
font-weight: 900;
transform: rotate(-30deg);
bottom: 5%;
right: -15%;
width: 110%;
font-size: 2rem;
line-height: 3rem;
transition: opacity 0.2s linear;
/* fade-in and fade-out for the screen take-over */
animation: var(--duration) ease-in-out var(--delay) 1 reverse forwards show;
}
.banner:hover {
opacity: 0.05;
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
/* Larger than mobile screen */
@media (min-width: 40rem) {
.banner {
right: -20%;
font-size: 6rem;
line-height: 7rem;
}
}
/* Larger than tablet screen */
@media (min-width: 80rem) {
.banner {
font-size: 8rem;
line-height: 9rem;
}
}
/* Larger than desktop screen */
@media (min-width: 120rem) {
.banner {
font-size: 10rem;
line-height: 11rem;
}
}
/* BANNER ANIMATION */
.marquee {
overflow: hidden;
position: relative;
padding-left: 100%;
/* Some browsers may require -webkit-animation */
-webkit-animation: reduce 30s linear infinite;
animation: reduce 30s linear infinite;
--offset: 20vw;
--move-initial: calc(-70% + var(--offset));
--move-final: calc(-50% + var(--offset));
}
.marquee__inner {
white-space: nowrap;
display: inline-block;
/* Some browsers may require -webkit-animation */
-webkit-animation: scroll var(--ad) linear infinite;
animation: scroll var(--ad) linear infinite;
transform: translate3d(var(--move-initial), 0, 0);
}
/* Creates two blck-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
z-index: 1;
top: 0;
left: 0;
position: absolute;
width: 40%;
height: 100%;
content: "";
display: block;
background: linear-gradient(to right, var(--banner-bg-color), transparent);
}
.marquee::after {
left: auto;
right: 0;
transform: rotate(180deg);
}
/* Some browsers may require @-webkit-keyframes */
@keyframes reduce {
to {
padding-left: 0;
}
}
@keyframes scroll {
to {
transform: translateX(-100%);
}
}

View File

@ -1,171 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
--main-bg-color: black;
--main-color: white;
--bg: #8f8f8f;
}
.montserrat {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: italic;
}
.extension-banner-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh; /* Full screen height */
background-color: transparent;
z-index: 9999; /* High z-index to ensure it blocks everything below */
display: flex;
justify-content: center;
align-items: center;
pointer-events: none; /* Allow clicks to pass through */
background: linear-gradient(var(--main-color), var(--bg));
opacity: 0;
/* fade-in and fade-out for the screen take-over */
animation: var(--duration) ease-in-out var(--duration) 1 normal forwards
show,
var(--duration) ease-in-out var(--delay) 1 reverse forwards show;
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
.banner {
background: var(--main-bg-color);
color: var(--main-color);
position: relative;
padding: 1rem;
font-size: 5rem;
line-height: 11rem;
transform: rotate(-25deg); /* Rotates the banner */
width: 200vw; /* Extra-wide to ensure the marquee scrolls smoothly across */
height: auto;
/* Apply gradients to the banner itself */
/* Add a left-to-transparent gradient on the left */
/* Add a right-to-transparent gradient on the right */
}
.banner::before,
.banner::after {
position: absolute;
top: 0;
z-index: 9999;
width: 15%;
height: 100%;
content: "";
}
.banner::before {
left: 0;
background: linear-gradient(to right, var(--main-bg-color), transparent);
}
.banner::after {
right: 0;
background: linear-gradient(to left, var(--main-bg-color), transparent);
}
.marquee {
overflow: hidden;
position: relative;
width: 100%;
}
.marquee__inner {
display: inline-block;
white-space: nowrap;
/* Adjust the speed using --ad which can be set dynamically in the HTML */
animation: scroll var(--ad, 100s) linear infinite;
transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}
.marquee span {
display: inline-block;
padding-right: 2rem; /* Add some space between each repeat */
}
/* Keyframes to make the animation appear infinite without gaps */
@keyframes scroll {
0% {
transform: translate3d(
-50%,
0,
0
); /* Start in the middle of the loop */
}
100% {
transform: translate3d(-100%, 0, 0); /* Move left but only 50% */
}
}
/* Mobile screens */
@media (max-width: 30rem) {
.extension-banner-container {
width: 110vw;
height: 110vh;
}
.banner {
transform: rotate(-60deg);
width: 250vw;
margin-left: -15rem;
}
}
/* Tablet screens */
@media (min-width: 48rem) {
.banner {
transform: rotate(-50deg);
width: 225vw;
margin-left: -5rem;
}
}
/* iPad Mini */
@media (min-width: 48rem) and (max-width: 64rem) and (orientation: landscape) {
.banner {
transform: rotate(-40deg);
width: 225vw;
margin-left: -5rem;
}
}
/* Laptop screens */
@media (min-width: 64rem) {
.extension-banner-container {
width: 115vw;
height: 115vh;
}
.banner {
transform: rotate(-30deg);
width: 210vw;
margin-left: -5rem;
margin-top: -5rem;
}
}
/* Desktop screens */
@media (min-width: 80rem) {
.extension-banner-container {
width: 115vw;
height: 115vh;
}
.banner {
transform: rotate(-32deg);
width: 200vw;
margin-left: -15rem;
margin-top: -15rem;
}
}