Developers wanting to add context menus to browser extensions face an all-or-nothing situation: context menu items, being global features, will be present on all pages once created. Adding a context menu item is easy, but if we want it to show only on certain Internet domains we will need to:
While rebuilding the Pinterest extension for Chrome we ran across a weird edge case at vox.com. We could preview their nice big fat srcset-enabled images in the grid and scrape + post to Pinterest, but could not take the src attribute of an IMG tag and directly apply it to the background-image style attribute of a new DIV.
Here are some reduced cases:
Copy this to clipboard:
| var xhr = o => { | |
| return new Promise(function(resolve, reject) { | |
| var req = new XMLHttpRequest(); | |
| o.method = o.method || 'GET'; | |
| // third parameter must be there and be true to use o.formData | |
| req.open(o.method, o.url, true); | |
| // default text; can send json | |
| req.responseType = o.responseType || 'text'; | |
| // get reply back from API in proper language |
| var browser = chrome || browser; | |
| var iframe = document.createElement('IFRAME'); | |
| iframe.style.position = 'fixed'; | |
| iframe.style.height = '100px'; | |
| iframe.style.width = '300px'; | |
| iframe.style.top = '0'; | |
| iframe.style.right = '0'; | |
| iframe.src = browser.extension.getURL('iframe.html'); | |
| document.body.appendChild(iframe); |
Just like Facebook and Twitter, Pinterest has its own namespace. Go like this:
<meta property="pin:url" content="https://yourpage.com/pinit/test/pinterest_meta.html" />
<meta property="pin:description" content="This pin was generated by the Pinterest meta." />
<meta property="pin:media" content="http://cdn.yourpage.com/your_image_here.jpg" />
... and your preferred image (which need not actually appear on the page) will show at the top of the grid when someone uses Pinterest's mobile device, browser extension, or Any Image Save button.
January 25, 2017
MEMORANDUM FOR:
Kevin McAleenan, Acting Commissioner, U.S. Customs and Border Protection
Dan Ragsdale, Acting Director, U.S. Immigration and Customs Enforcement
Lori Scialabba, Acting Director, U.S. Citizenship and Immigration Services
| <!doctype html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="presentation.css"> | |
| </head> | |
| <body> | |
| <script src="behavior.js"></script> | |
| </body> |
| // If we know the extension's ID and a path to one of its web-accessible resources, we can quietly check for presence. | |
| (function (w, a) { | |
| var checkExt = function (callback) { | |
| var hazExt = false; | |
| var img = new Image(); | |
| img.onload = function () { | |
| hazExt = true; | |
| }; | |
| // need to know the right protocol for Firefox and Edge extensions |
| From the root directory of your Chrome extension: | |
| grep -r " chrome\." . | sed s/.*chrome\./\"/g | sed s/\(.*/#Browser_compatibility/ | sed s/[.]/\\//g | sed s/./https:\\/\\/developer\.mozilla\.org\\/Add-ons\\/WebExtensions\\/API\\// | sort | uniq | |
| Hopefully you'll get something like this: | |
| https://developer.mozilla.org/Add-ons/WebExtensions/API/i18n/getMessage#Browser_compatibility | |
| https://developer.mozilla.org/Add-ons/WebExtensions/API/runtime/sendMessage#Browser_compatibility | |
| https://developer.mozilla.org/Add-ons/WebExtensions/API/storage/local/get#Browser_compatibility | |
| https://developer.mozilla.org/Add-ons/WebExtensions/API/storage/local/set#Browser_compatibility |