☰

Outil Hacker (F12 view source code)

Il s'agit d'un "outil de développeur" pour éditer et afficher des éléments HTML et utiliser JavaScript. Il est livré avec une interface responsive pour les appareils mobiles.

Version au 30/09/2023. Voir la dernière version.

// ==UserScript==
// @name       Ferramenta Hacker (F12 view source code)
// @name:pt       Ferramenta Hacker (F12 view source code)
// @name:es       Herramienta Hacker (F12 view source code)
// @name:en       Hacker Tools (F12 view source code)
// @name:fr       Outil Hacker (F12 view source code)
// @name:ru       Инструмент разработчика (F12 view source code)
// @name:ja       開発者ツール (F12 view source code)
// @name:ko       개발자 도구 (F12 view source code)
// @name:zh-TW       開發者工具 (F12 view source code)
// @name:zh-CN       开发者工具 (F12 view source code)

// @description       Este é um "developer tools" para edição e visualização dos elementos HTML e uso de JavaScript. Acompanha interface responsiva para celulares.
// @description:pt       Este é um "developer tools" para edição e visualização dos elementos HTML e uso de JavaScript. Acompanha interface responsiva para celulares.
// @description:es       Esta es una "herramienta de desarrollador" para editar y ver elementos HTML y usar JavaScript. Incluye una interfaz receptiva para dispositivos móviles.
// @description:en       This is a "developer tool" for editing and viewing HTML elements and using JavaScript. It comes with a responsive interface for mobile devices.
// @description:fr       Il s'agit d'un "outil de développeur" pour éditer et afficher des éléments HTML et utiliser JavaScript. Il est livré avec une interface responsive pour les appareils mobiles.
// @description:ru       Это "инструмент разработчика" для редактирования и просмотра элементов HTML и использования JavaScript. Он имеет адаптивный интерфейс для мобильных устройств.
// @description:ja       これはHTML要素の編集と表示、JavaScriptの使用のための「開発者ツール」です。モバイルデバイス向けにレスポンシブなインターフェースが提供されています。
// @description:ko       이것은 HTML 요소를 편집하고 보고 JavaScript를 사용하기 위한 "개발자 도구"입니다. 모바일 기기용 반응형 인터페이스가 제공됩니다.
// @description:zh-TW       這是一個用於編輯和查看HTML元素並使用JavaScript的「開發人員工具」。它提供了適用於移動設備的響應式界面。
// @description:zh-CN       这是一个用于编辑和查看HTML元素并使用JavaScript的「开发者工具」。它提供了适用于移动设备的响应式界面。

// @namespace       http://linkme.bio/jhonpergon/?userscript=console_mobile_view
// @version       0.3
// @author       Jhon Pérgon

// @icon         https://play-lh.googleusercontent.com/Apmfx7PWiz-YC-xEdAvIH7uPjLzj6L5fvVqUcDbFFxtPN7ppFMEfS4ty6oAg7xbwWQ
// @grant        GM_addStyle
// @match        *://*/*
// @grant        none
// @license      MIT

// @compatible      chrome
// @compatible      firefox
// @compatible      opera
// @compatible      edge
// @compatible      safari
// @compatible      berrybrowser
// ==/UserScript==


GM_addStyle('@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");');

var body = `
<div style="width:100%;height:29px;top:0px;background:black; text-align: left; color:#fff;border-bottom:solid 1.5px #3d3e4a;border-top:solid 1.5px #3d3e4a;">
<button style="float:left; margin: 3px 2px; padding: 0px 5px; height:23px; background:#080809; border: solid 1px gray; border-radius: 5px; color:#fff;" id="edit_on_or_off">Mode \u270E</button>
<button style="float:left; margin: 3px 2px; padding: 0px 5px; height:23px; background:#080809; border: solid 1px gray; border-radius: 5px; color:#fff;" id="findelements">Analyze</button>
<button id="save" style="width:60px;height:auto; margin: 3px 2px; height:23px; background:#080809; border: solid 1px gray; border-radius: 5px; color:#fff;" onclick="javascript:document.documentElement.innerHTML = document.getElementById('documentelements').textContent;">Save</button>
<button id="load" style="width:60px;height:auto; margin: 3px 2px; height:23px; background:#080809; border: solid 1px gray; border-radius: 5px; color:#fff;" onclick="javascript:document.getElementById('documentelements').textContent = document.documentElement.outerHTML;">Load</button>
<button style="cursor:pointer;float:right; padding: 2px 10px; height:24px; background:#080809; border: solid 1px #121f4a; border-radius: 5px; color:#fff; color:#fff; margin: 2px 3px;" id="exit" onclick="javascript:document.getElementById('devconsole').remove();document.getElementById('devScript').remove();">Close</button>
</div>
<pre id="documentelements" style="width:98%;height:268px; font-size: .80rem; margin:auto; border: solid 1px #18181d; line-height:1.4;text-align:left;background:#0b0c0d;color:#fff;overflow:auto;padding:5px;">

  Changes implemented!

Click load to add new edits.
</pre>`;


var myJavascript = `
<textarea style="width: calc(80%); height: 35px; outline: 0; resize: none; border: none; float: left; margin-left: .5%; margin-top: 2px; padding: 3px 5px; font-size: .90rem; background-color: #0f1314; color: #d3bcff" type="text" id="myCode" placeholder="»"></textarea>
<button style="width: calc(19% + -12px); margin-right: .5%; height: 38px; background-color: #080809; color: #dcdcdc; border: solid 1px #151b1d; margin-top: 2px; border-radius: 3px; float: right;" id="getjs">Add JS</button>
`;


function show(elem) {
    elem.style.display = "block";
    elem.style.x = all.x;
    elem.style.y = all.y + 20;
    elem.textContent = "";
}

function hide(elem) {
    elem.style.display = "";
    elem.textContent = all.id + all.style + all.tagName;
}

var all = document.querySelector("*");
var devconsole = document.createElement('div');
devconsole.id = "devconsole";
devconsole.style.position = "fixed";
devconsole.style.width = "100%";
devconsole.style.height = "300px";
devconsole.style.bottom = "45px";
devconsole.style.background = "#333";
devconsole.style.zIndex = "999999";
devconsole.innerHTML = body;

var devScript = document.createElement('div');
devScript.id = "devScript";
devScript.style.position = "fixed";
devScript.style.width = "100%";
devScript.style.height = "45px";
devScript.style.bottom = "0px";
devScript.style.position = "fixed";
devScript.style.background = "#333";
devScript.style.zIndex = "999999";
//devScript.style.border = "solid 1px blue";
devScript.innerHTML = myJavascript;

var opendev = document.createElement('button');
opendev.style.position = "fixed";
opendev.style.width = "70px";
opendev.style.height = "25px";
opendev.style.right = "0";
opendev.style.bottom = "0";
opendev.style.marginRight = "8px";
opendev.style.marginBottom = "4px";
opendev.style.padding = "2px 4px";
opendev.style.fontSize = "14px";
opendev.style.zIndex = "99999";
opendev.style.borderRadius = "0px 5px 5px 0px";
opendev.id = "opendev";
opendev.style.background = "#080809";
opendev.style.color = "#fff";
opendev.style.border = "solid 1px gray";
opendev.innerHTML = "F12 <i class='bi bi-chevron-double-right'></i>";

var closeButton = document.createElement('button');
closeButton.style.position = "fixed";
closeButton.style.right = "78px";
closeButton.style.width = "40px";
closeButton.style.height = "25px";
closeButton.style.marginBottom = "4px";
closeButton.style.borderRadius = "5px 0px 0px 5px";
closeButton.style.bottom = "0";
closeButton.style.zIndex = "99999";
closeButton.style.padding = "2px 4px";
closeButton.style.fontSize = "14px";
closeButton.id = "closed";
closeButton.style.background = "#080809";
closeButton.style.color = "#fff";
closeButton.style.border = "solid 1px gray";
closeButton.innerHTML = "X";

let editando = false;
let buttonId = "edit_on_or_off";

  opendev.addEventListener("click", function() {
    document.body.appendChild(devconsole);
    document.body.appendChild(devScript);

    var documentelements = document.getElementById('documentelements');

   documentelements.textContent = document.documentElement.outerHTML.replace(/</g, "<").replace(/></g, ">\n<").replace(/>/g, ">").replace("style>", "style>\n").replace(/{/g, "{\n").replace(/}/g, "\n}\n").replace(");", ");\n");

    documentelements.contentEditable = "true";
    documentelements.addEventListener("click", function() {
        if (documentelements.contentEditable !== "true") {
            documentelements.contentEditable = "true";
        }
    });

    document.getElementById("edit_on_or_off").addEventListener("click", function() {
        if (editando == false) {
            document.body.contentEditable = "true";
            document.body.designMode = "on";
            document.getElementById("edit_on_or_off").innerHTML = "Disable \u270E";
            editando = true;
            document.getElementById('devconsole').remove();
            document.getElementById('devScript').remove();
            alert("Interface editing mode (enabled).");
        } else {
            document.getElementById('devconsole').remove();
            document.getElementById('devScript').remove();
            alert("Interface editing mode (disabled).");
            window.location.reload();
        }
    });


    document.getElementById("findelements").addEventListener("click", function() {
        document.addEventListener("mousemove", function awesome(e) {
            if (e.target.tagName != "") {
                e.target.title = e.target.tagName.toLowerCase();
            }
            if (e.target.id != "") {
                e.target.title += "#" + e.target.id;
            }
            if (e.target.className != "") {
                e.target.title += "." + e.target.className;
            }
        });
      alert("Analyze mode activated. Hover over elements to see details.");
    });




    document.getElementById("getjs").addEventListener("click", function() {
        var inputElement = document.getElementById('myCode');
        var valorInput = inputElement.value;
        console.log('meuValor = '+valorInput);
        try {
            // executar o código
            eval(valorInput);
        } catch (e) {
            console.error('Erro ao executar código:', e);
        }
    });

});



closeButton.addEventListener("click", function() {
    opendev.style.display = "none";
    closeButton.style.display = "none";
});

document.body.appendChild(closeButton);
document.body.appendChild(opendev);