Compare commits

..

4 commits

5 changed files with 247 additions and 131 deletions

View file

@ -1,6 +1,6 @@
/**
* Unchecker - Simple extension letting you uncheck all checkboxes on a page
* Copyright (c) Ad5001 2021
* Copyright (c) Ad5001 2021-2023
*
* This Source Code Form is subject to the terms of the Mozilla Public License,
* v. 2.0. If a copy of the MPL was not distributed with this file, You can
@ -9,52 +9,67 @@
// This file handles all clicking automaticly all similar buttons (e.g : same text & element name)
const CLICK_ALL_SCRIPT = `
var bound, selectedElements, clickedButton, buttonText, classes, query, sameElements;
// Get the potential selected button
bound = browser.menus.getTargetElement(targetElementId).getBoundingClientRect();
selectedElements = document.elementsFromPoint(bound.x+bound.width/2, bound.y+bound.height/2)
const clickAllScript = (targetElementId) => {
let bound, selectedElements, clickedButton, buttonText, classes, query, sameElements
// Get the potential selected button
bound = browser.menus.getTargetElement(targetElementId).getBoundingClientRect()
selectedElements = document.elementsFromPoint(bound.x+bound.width/2, bound.y+bound.height/2)
// Leftover debug for positioning
//console.log(bound, browser.menus.getTargetElement(targetElementId), selectedElements)
//var div = document.createElement("div"); div.style.background = "black"; div.style.position = "absolute";
//div.style.left = bound.x+bound.width/2-5 +"px"; div.style.top = bound.y+bound.height/2-5 + "px";
//div.style.width = "10px"; div.style.height = "10px";
//document.body.appendChild(div);
// Leftover debug for positioning
//console.log(bound, browser.menus.getTargetElement(targetElementId), selectedElements)
//var div = document.createElement("div"); div.style.background = "black"; div.style.position = "absolute";
//div.style.left = bound.x+bound.width/2-5 +"px"; div.style.top = bound.y+bound.height/2-5 + "px";
//div.style.width = "10px"; div.style.height = "10px";
//document.body.appendChild(div);
selectedElements = selectedElements.filter(x => ["BUTTON","A","INPUT"].indexOf(x.tagName) > -1)
// If a button is selected
if(selectedElements.length > 0) {
clickedButton = selectedElements[0]
// Gather element that will be used in similar buttons (same text content).
buttonText = clickedButton.textContent.trim()
// Find the similar buttons
query = clickedButton.localName + (clickedButton.tagName == "INPUT" ? "[type=" + clickedButton.type + "]" : "")
sameElements = document.querySelectorAll(query)
sameElements = Array.from(sameElements).filter(btn => btn.textContent.trim() == buttonText)
// Click them automaticly.
sameElements.forEach(btn => {
btn.click()
})
selectedElements = selectedElements.filter(x => ["BUTTON","A","INPUT"].indexOf(x.tagName) > -1)
// If a button is selected
if(selectedElements.length > 0) {
clickedButton = selectedElements[0]
// Gather element that will be used in similar buttons (same text content).
buttonText = clickedButton.textContent.trim()
// Find the similar buttons
query = clickedButton.localName + (clickedButton.tagName == "INPUT" ? "[type=" + clickedButton.type + "]" : "")
sameElements = document.querySelectorAll(query)
sameElements = Array.from(sameElements).filter(btn => btn.textContent.trim() == buttonText)
// Click them automaticly.
sameElements.forEach(btn => {
btn.click()
})
}
}
` // Requires targetElementId to be defined beforehands
const CLICK_ALL_TITLE = "Click all similar buttons";
const CLICK_ALL_MENU_CONTEXTS = ["editable", "image", "link", "page"];
// Requires targetElementId to be defined beforehands
const CLICK_ALL_TITLE = "Click all similar buttons"
const CLICK_ALL_MENU_CONTEXTS = ["all"]
function clickAllSimilarButtons(info, tab) {
browser.tabs.executeScript(tab.id, {
frameId: info.frameId,
code: `var targetElementId = ${info.targetElementId};${CLICK_ALL_SCRIPT}`,
});
browser.scripting.executeScript({
target: {
tabId: tab.id,
frameIds: [ info.frameId ],
},
func: clickAllScript,
args: [ info.targetElementId ]
})
}
browser.menus.create({
id: "unchecker-clickall",
title: CLICK_ALL_TITLE,
icons: {
"16": "icons/click.svg",
"32": "icons/click.svg"
},
contexts: CLICK_ALL_MENU_CONTEXTS,
onclick(info, tab) { clickAllSimilarButtons(info, tab) }
});
/**
* Creating menu.
*/
if(browser.menus) { // Not supported on Firefox for Android
browser.menus.create({
id: "unchecker-clickall",
title: CLICK_ALL_TITLE,
icons: {
"16": "icons/click.svg",
"32": "icons/click.svg"
},
contexts: CLICK_ALL_MENU_CONTEXTS,
});
browser.menus.onClicked.addListener((info, tab) => {
if(info.menuItemId == "unchecker-clickall")
clickAllSimilarButtons(info, tab)
})
}

View file

@ -1,18 +1,21 @@
{
"description": "Simple extension letting you uncheck all checkboxes on a page.",
"manifest_version": 2,
"manifest_version": 3,
"name": "unchecker",
"version": "1.1",
"version": "1.2.2",
"author": "Ad5001",
"developer": {
"name": "Ad5001",
"url": "https://ad5001.eu"
"name": "Ad5001",
"url": "https://ad5001.eu"
},
"applications": {
"browser_specific_settings": {
"gecko": {
"id": "unchecker@ad5001.eu",
"strict_min_version": "60.0"
"strict_min_version": "113.0"
},
"gecko_android": {
"strict_min_version": "113.0"
}
},
"homepage_url": "https://apps.ad5001.eu/unchecker/",
@ -20,10 +23,10 @@
"background": {
"scripts": ["uncheck.js", "clickall.js"]
},
"browser_action": {
"action": {
"default_icon": "icons/on.svg",
"browser_style": true
"default_title": "Uncheck all checkboxes"
},
"icons": {
"48": "icons/off.svg",
@ -32,7 +35,8 @@
"permissions": [
"activeTab",
"tabs",
"menus"
"menus",
"scripting"
]
}

86
test/frame.html Normal file
View file

@ -0,0 +1,86 @@
<!--
* Unchecker - Simple extension letting you uncheck all checkboxes on a page
* Copyright (c) Ad5001 2021-2023
*
* This Source Code Form is subject to the terms of the Mozilla Public License,
* v. 2.0. If a copy of the MPL was not distributed with this file, You can
* obtain one at http://mozilla.org/MPL/2.0/.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Unchecker tests in iframe</title>
<style>
legend {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
.toggled {
border-color: blue;
}
input {
margin: .4rem;
}
</style>
<script src="test.js"></script>
</head>
<body>
<fieldset>
<legend>Example radio list</legend>
<input type="radio" id="choice-value1" name="choice-value">
<label for="choice-value">Example, irrelevant choice value 1</label><br/>
<input type="radio" id="choice-value2" name="choice-value">
<label for="choice-value">Example, irrelevant choice value 2</label><br/>
</fieldset>
<br>
<fieldset>
<legend>Third party partners example</legend>
<input type="checkbox" id="ga-choice" checked="true">
<label for="ga-choice">Google Analytics</label><br/>
<input type="checkbox" id="facebook-ads" checked="true">
<label for="facebook-ads">Facebook Partnering</label><br/>
<input type="checkbox" id="amazon-sales" checked="true">
<label for="amazon-sales">Amazon</label><br/>
<input type="checkbox" id="salesforce" checked="true">
<label for="salesforce">Salesforce</label><br/>
</fieldset>
<br>
<fieldset>
<legend>Third party partners second</legend>
<table>
<tr>
<td>Google Analytics</td>
<td><button role="toggle" class="toggled" name="ga-choice">On</button></td>
<td><button role="toggle" name="ga-choice">Off</button></td>
</tr>
<tr>
<td>Facebook Partnering</td>
<td><button role="toggle" class="toggled" name="facebook-ads">On</button></td>
<td><button role="toggle" name="facebook-ads">Off</button></td>
</tr>
<tr>
<td>Amazon</td>
<td><button role="toggle" class="toggled" name="amazon-sales">On</button></td>
<td><button role="toggle" name="amazon-sales">Off</button></td>
</tr>
<tr>
<td>Salesforce</td>
<td><button role="toggle" class="toggled" name="salesforce">On</button></td>
<td><button role="toggle" name="salesforce">Off</button></td>
</tr>
</table>
</fieldset>
</body>
</html>

View file

@ -1,6 +1,6 @@
<!--
* Unchecker - Simple extension letting you uncheck all checkboxes on a page
* Copyright (c) Ad5001 2021
* Copyright (c) Ad5001 2021-2023
*
* This Source Code Form is subject to the terms of the Mozilla Public License,
* v. 2.0. If a copy of the MPL was not distributed with this file, You can
@ -25,6 +25,11 @@
input {
margin: .4rem;
}
iframe {
width: 100%;
height: 500px;
}
</style>
<script src="test.js"></script>
</head>
@ -81,5 +86,9 @@
</tr>
</table>
</fieldset>
<fieldset>
<legend>IFramed tests</legend>
<iframe src="./frame.html"></iframe>
</body>
</html>

View file

@ -1,146 +1,148 @@
/**
* Unchecker - Simple extension letting you uncheck all checkboxes on a page
* Copyright (c) Ad5001 2021
* Copyright (c) Ad5001 2021-2023
*
* This Source Code Form is subject to the terms of the Mozilla Public License,
* v. 2.0. If a copy of the MPL was not distributed with this file, You can
* obtain one at http://mozilla.org/MPL/2.0/.
**/
const UNCHK_SCRIPT = `
function disable_checkboxes(element){
const uncheckAll = () => {
document.body.querySelectorAll('input[type="checkbox"]').forEach(function(el){
el.checked = false
})
}
disable_checkboxes(document.body)
document.body.querySelectorAll('iframe').forEach(function(el){disable_checkboxes(el.contentDocument || el.contentWindow.document)})
`
const CHK_SCRIPT = `
function check_checkboxes(element){
const checkAll = () => {
document.body.querySelectorAll('input[type="checkbox"]').forEach(function(el){
el.checked = true
})
}
check_checkboxes(document.body)
document.body.querySelectorAll('iframe').forEach(function(el){check_checkboxes(el.contentDocument || el.contentWindow.document)})
`
const TITLE_APPLY = "Uncheck all checkboxes";
const TITLE_REMOVE = "Check all checkboxes";
const APPLICABLE_PROTOCOLS = ["http:", "https:"];
const MENU_CONTEXTS = ["editable", "image", "link", "page"];
const TITLE_UNCHECK = "Uncheck all checkboxes"
const TITLE_CHECK = "Check all checkboxes"
const APPLICABLE_PROTOCOLS = ["http:", "https:"]
const MENU_CONTEXTS = ["all"]
/**
* Toggle Script: based on the current title, insert or remove the Script.
* Update the page action's title and icon, aswell as the context menu item to reflect its state.
* Update the page actions title and icon, aswell as the context menu item to reflect its state.
**/
function toggleScript(tab) {
function gotTitle(title) {
if (title === TITLE_APPLY) {
browser.browserAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
browser.browserAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
browser.menus.remove("unchecker-main").then(function() {
browser.menus.create({
id: "unchecker-main",
title: TITLE_REMOVE,
console.log((title === TITLE_UNCHECK ? "Unchecking all checkboxes..." : "Checking all checkboxes...") + " at tab " + tab.id)
if(title === TITLE_UNCHECK) {
browser.action.setIcon({tabId: tab.id, path: "icons/off.svg"})
browser.action.setTitle({tabId: tab.id, title: TITLE_CHECK})
browser.scripting.executeScript({
func: uncheckAll,
target: {
tabId: tab.id,
allFrames: true
}
})
if(browser.menus)
browser.menus.update("unchecker-main", {
title: TITLE_CHECK,
icons: {
"16": "icons/off.svg"
},
contexts: MENU_CONTEXTS,
onclick(info,tab) { toggleScript(tab) }
});
}, function(){})
browser.tabs.executeScript({
code: UNCHK_SCRIPT
});
}
})
} else {
browser.browserAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
browser.browserAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
browser.menus.remove("unchecker-main").then(function() {
browser.menus.create({
id: "unchecker-main",
title: TITLE_APPLY,
browser.action.setIcon({tabId: tab.id, path: "icons/on.svg"})
browser.action.setTitle({tabId: tab.id, title: TITLE_UNCHECK})
browser.scripting.executeScript({
func: checkAll,
target: {
tabId: tab.id,
allFrames: true,
}
})
if(browser.menus)
browser.menus.update("unchecker-main", {
title: TITLE_UNCHECK,
icons: {
"16": "icons/on.svg"
},
contexts: MENU_CONTEXTS,
onclick(info,tab) { toggleScript(tab) }
});
}, function(){})
browser.tabs.executeScript({
code: CHK_SCRIPT
});
}
})
}
}
var gettingTitle = browser.browserAction.getTitle({tabId: tab.id});
gettingTitle.then(gotTitle);
browser.action.getTitle({tabId: tab.id}).then(gotTitle)
}
/**
* Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS.
**/
function protocolIsApplicable(url) {
let anchor = document.createElement('a');
anchor.href = url;
return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
let anchor = document.createElement('a')
anchor.href = url
return APPLICABLE_PROTOCOLS.includes(anchor.protocol)
}
/**
* Initialize the page action: set icon and title, then show.
* Initialize the page action set icon and title, then show.
* Only operates on tabs whose URL's protocol is applicable.
**/
function initializebrowserAction(tab, createMenu) {
// console.log("Initializing browser action for tab", tab, createMenu)
if(protocolIsApplicable(tab.url)) {
browser.browserAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
browser.browserAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
browser.browserAction.show(tab.id);
browser.action.setIcon({tabId: tab.id, path: "icons/on.svg"})
browser.action.setTitle({tabId: tab.id, title: TITLE_UNCHECK})
}
if(createMenu) {
if(createMenu && browser.menus) {
browser.menus.remove("unchecker-main").then(function() {
browser.menus.create({
id: "unchecker-main",
title: TITLE_APPLY,
title: TITLE_UNCHECK,
icons: {
"16": "icons/on.svg"
},
contexts: MENU_CONTEXTS,
onclick(info,tab) { toggleScript(tab) }
});
}, function(){})
contexts: MENU_CONTEXTS
})
})
}
}
/**
* Create the default context menu for the main function.
*/
if(browser.menus) { // Not supported on Firefox for Android
browser.menus.create({
id: "unchecker-main",
title: TITLE_UNCHECK,
icons: {
"16": "icons/on.svg"
},
contexts: MENU_CONTEXTS
})
browser.menus.onClicked.addListener((info, tab) => {
if(info.menuItemId == "unchecker-main")
toggleScript(tab)
})
}
/**
* When first loaded, initialize the page action for all tabs.
**/
browser.menus.create({
id: "unchecker-main",
title: TITLE_APPLY,
icons: {
"16": "icons/on.svg"
},
contexts: MENU_CONTEXTS,
onclick(info,tab) { toggleScript(tab) }
});
let gettingAllTabs = browser.tabs.query({});
gettingAllTabs.then((tabs) => {
for (let tab of tabs) {
initializebrowserAction(tab, false);
browser.tabs.query({}).then((tabs) => {
for(let tab of tabs) {
initializebrowserAction(tab, false)
}
});
/**
* Each time a tab is updated, reset the page action for that tab.
* Each time a tab is updated, reset the page browser.action.for that tab.
**/
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
initializebrowserAction(tab, true);
initializebrowserAction(tab, true)
});
/**
* Toggle Script when the page action is clicked.
* Toggle Script when the page browser.action.is clicked.
**/
browser.browserAction.onClicked.addListener(toggleScript);
browser.action.onClicked.addListener(toggleScript)