search

alphagov / govuk-browser-extension

Chrome and Firefox extension for developers working on GOV.UK.
22 stars 5 forks source link

Highlight meta tags #95

Closed MatMoore closed 6 years ago

MatMoore commented 6 years ago

This adds a button to the plugin for showing meta tags in a banner at the top of the page. It can be used to see what's being sent to google analytics, and what search engines see when crawling the page.

It's equivalent to this bookmarklet: javascript:(function()%7Bvar d %3D document.createElement(%27div%27)%3Bvar x %3D document.getElementsByTagName(%27title%27)%5B0%5D%3Bvar msg %3D %27<p><strong>title (%27%2Bx.innerHTML.length%2B%27):</strong> %27%2Bx.innerHTML%2B%27</p>%27%3Bvar ms %3D document.getElementsByTagName(%27meta%27)%3Bfor(var i%3D0%3Bi<ms.length%3Bi%2B%2B)%7Bif(null!%3D ms%5Bi%5D.getAttribute(%27name%27))%7Bvar c%3Dms%5Bi%5D.getAttribute(%27content%27)%3Bmsg%2B%3D%27<p><strong>%27%2Bms%5Bi%5D.getAttribute(%27name%27)%2B%27 (%27%2Bc.length%2B%27):</strong> %27%2Bc%2B%27</p>%27%3B%7D%7Ddocument.body.insertBefore(d,document.body.firstChild)%3Bd.innerHTML%3D%27<div style%3D"border:2px solid %23000%3Bbackground:%23ffc%3Btext-align:left%3Bpadding:1em%3B"><a href%3D"%23" onclick%3D"document.body.removeChild(document.body.firstChild)%3Breturn false">remove</a>%27%2Bmsg%2B%27</div>%27%3B%7D)()

The design is not amazing, but I'd rather render this on the page than try and fit it into the popup, because there can be a lot of them, and there is some overlap with information that's already in the popup, but I want to make it clear what's a meta tag and what isn't.

screen shot 2018-01-11 at 16 23 22

Trello: https://trello.com/c/TDeqykiP/106-add-gov-a-lytics-to-the-govuk-toolkit-chrome-extension

MatMoore commented 6 years ago

Definitely need to clean up the code a little bit as there's some injection going on there. ☹️

MatMoore commented 6 years ago

Have pushed up a commit that does everything using JQuery. A template would be nicer, but I'm not sure the best way of doing this in a chrome plugin, so I'm going to leave it as it is for now.

This fixes XSS issues on some analytics tags like these:

govuk:analytics:organisations (29): <D17>
govuk:analytics:world-locations (31): <WL110>

If anyone else wants to extract this to a template and apply GOV.UK styles to it, please do 👍