Tampermonkey / GreaseMonkey "Protect My Data" novelty

Facebook "Protect My Data" novelty.user.js

// ==UserScript==
// @author Steven Bytnar
// @name Facebook "Protect My Data" novelty
// @version 1.0.3
// @namespace IPMDFB
// @description Inserts a fake button at the top of the feed, just for fun.
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// @include *.facebook.com/*
// ==/UserScript==

// v1.0.1 - initial release
// v1.0.2 - localhost png reference converted to inline svg.
// v1.0.3 - Updated for 2020 light/dark style changes.
// Thanks to http://www.clickhole.com/article/privacy-win-facebook-adding-protect-my-data-button-7587
// for the idea and concept.

var applynovelty = function() {
var fbshpic = "<svg style=\"float:left; padding: 10px; display:inline-block;\" width=\"138\" height=\"174\" version=\"1.1\" viewBox=\"0 0 138 174\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\">\n"+
" <metadata>\n"+
"  <rdf:RDF>\n"+
"   <cc:Work rdf:about=\"\">\n"+
"    <dc:format>image/svg+xml</dc:format>\n"+
"    <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/>\n"+
"    <dc:title/>\n"+
"   </cc:Work>\n"+
"  </rdf:RDF>\n"+
" </metadata>\n"+
" <path d=\"m61.378 159.86c-21.738-14.187-36.563-30.228-45.301-49.015-6.3857-13.73-7.4892-20.94-6.7054-43.811 0.36818-10.743 1.0049-21.331 1.4148-23.528 0.72462-3.8836 0.9819-4.097 9.2293-7.6559 4.6661-2.0135 17.484-7.5537 28.484-12.312s20.704-8.7147 21.563-8.7928c1.6979-0.15434 55.574 22.526 58.273 24.531 3.9143 2.9085 5.116 44.727 1.6723 58.192-4.1276 16.139-14.004 31.735-29.073 45.911-7.9826 7.5094-27.798 21.621-30.36 21.621-0.72503 0-4.8635-2.3137-9.1965-5.1416zm10.622-54.792v-8.9336l-2.75-0.31642c-2.3764-0.27343-2.7916-0.81614-3.0561-3.9946-0.28082-3.3746-0.07446-3.7047 2.5-4 2.5134-0.28827 2.863-0.79116 3.352-4.8218 0.30023-2.475 1.093-5.4928 1.7618-6.7062 1.4347-2.6033 7.2142-4.4394 11.362-3.6097 2.5851 0.51702 2.9002 0.95991 2.6332 3.7016-0.26481 2.7197-0.7468 3.1777-3.8032 3.6144-3.2381 0.46258-3.5 0.7619-3.5 4 0 3.2303 0.25482 3.5245 3.3063 3.8176 3.1512 0.30266 3.292 0.49032 3 4-0.27854 3.3482-0.60129 3.7109-3.5563 3.9958l-3.25 0.31336v17.961l7.25-0.29381 7.25-0.29381 0.28254-22c0.1554-12.1 0.034324-23.012-0.26905-24.25l-0.55159-2.25h-22.781c-16.385 0-23.118 0.3369-23.981 1.2-1.2991 1.2991-1.8034 45.863-0.53333 47.133 0.36667 0.36667 6.2167 0.66667 13 0.66667h12.333z\" fill=\"#465996\"/>\n"+
"</svg>";

var fbshpiclhr = "<img style=\"float:left; padding: 10px; display:inline-block;\" src=\"http://127.0.0.1/fbsh.png\">";

// #pagelet_megaphone previously... [aria-label="Create a post"] [role="main"]
var container = $('[aria-label="Create a post"]');
var classList = $('[aria-label="Create a post"]').classList;
if (classList) classList.value; // Doesn't quite work, so we have to fudge a gray background that inverts well in light and dark mode. :-)
if (!classList) classList = "fcg";
container.prepend("<div style=\"filter: invert(1); background-color:#888888; X-color:#365899;"+
"box-sizing: border-box;"+
"padding: 10px; margin:5px;"+
"\" class=\"" +
                  //"fcg" +
                  classList +
                  "\">"+
"<div style=\"filter: invert(1);\">"+ fbshpic + "</div>"+
"<div style=\"font-size:24px; padding: 5px; "+
"\">Press \"Protect My Data\" on Facebook</div><div>"+
"<p style=\"\">Hi, we are always working to make you feel that your data is safe on Facebook. "+
"Press this nonfunctional \"Protect My Data\" button to give yourself a sense of security today!"+
"<p><button style=\"filter: invert(1);"+
"background-color: rgb(64, 101, 174);"+
"border-bottom-color: rgb(66, 103, 178);"+
"border-bottom-left-radius: 2px;"+
"border-bottom-right-radius: 2px;"+
"border-bottom-style: solid;"+
"border-bottom-width: 1px;"+
"border-image-outset: 0px;"+
"border-image-repeat: stretch;"+
"border-image-slice: 100%;"+
"border-image-source: none;"+
"border-image-width: 1;"+
"border-left-color: rgb(66, 103, 178);"+
"border-left-style: solid;"+
"border-left-width: 1px;"+
"border-right-color: rgb(66, 103, 178);"+
"border-right-style: solid;"+
"border-right-width: 1px;"+
"border-top-color: rgb(66, 103, 178);"+
"border-top-left-radius: 2px;"+
"border-top-right-radius: 2px;"+
"border-top-style: solid;"+
"border-top-width: 1px;"+
"box-sizing: content-box;"+
"X-color:#ffffff;"+
"cursor: pointer;"+
"direction: ltr;"+
"display: inline-block;"+
"font-style: normal;"+
"font-variant-caps: normal;"+
"font-weight: bold;"+
"height: 22px;"+
"justify-content: center;"+
"letter-spacing: normal;"+
"line-height: 22px;"+
"list-style-type: none;"+
"margin-left: 5px;"+
"padding-left: 8px;"+
"padding-right: 8px;"+
"position: relative;"+
"text-align: center;"+
"transition-delay: 0s, 0s, 0s;"+
"transition-duration: 0.2s, 0.2s, 0.2s;"+
"transition-property: background-color, box-shadow, transform;"+
"transition-timing-function: cubic-bezier(0.08, 0.52, 0.52, 1), cubic-bezier(0.08, 0.52, 0.52, 1), cubic-bezier(0.08, 0.52, 0.52, 1);"+
"vertical-align: middle;"+
"white-space: nowrap;"+
"word-spacing: 0px;"+
"word-wrap: break-word;"+
"writing-mode: horizontal-tb;"+
"\" onclick=\"alert('You are just one click away from being protected... please click again.');\"><span style=\"filter: invert(1)\">Protect My Data</span></button></div></div>");
};

// Apply on page load. This one is not usually functional.
applynovelty();
//$.ready(applynovelty);
var container = $('[aria-label="Create a post"]');
container.resize(applynovelty);

// Reapply after 10 seconds because FB reloads the "Create a post" section dynamically. This one IS functional.
setTimeout(applynovelty, 10000);