bookmarklet.js

# copy html to clipboard
javascript:!function(e){var t=document.createElement("textarea"),o=document.getSelection();t.textContent=e,document.body.appendChild(t),o.removeAllRanges(),t.select(),document.execCommand("copy"),o.removeAllRanges(),document.body.removeChild(t),window.alert("Copied")}(document.querySelector('.yearly-aqi').innerHTML);

# download html file
javascript:!function () { var element = document.createElement('a'); var yearlyAqiElement = document.querySelector('.yearly-aqi'); var text = yearlyAqiElement.innerHTML; var city = window.location.href.match('https://aqicn.org/city/([A-Za-z]+)/')[1]; var specie = yearlyAqiElement.querySelector('.active-specie').innerText; var data = new Blob([text], { type: 'text/html' }); var url = window.URL.createObjectURL(data); element.setAttribute('href', url); element.setAttribute('download', (city + '_' + specie + '.html').toLowerCase()); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); }()

explanation.js

javascript:! // must start with this to indicate that this is a javascript for browser to execute
function () { // wrap our code in a function to prevent variable pollution
  var element = document.createElement('a'); // create a hyperlink element
  var yearlyAqiElement = document.querySelector('.yearly-aqi'); // query for the element that has class 'yearly-aqi'
  var text = yearlyAqiElement.innerHTML; // get the html in the '.yearly-aqi' element
  var city = window.location.href.match('https://aqicn.org/city/([A-Za-z]+)/')[1]; // get the city name from url
  var specie = yearlyAqiElement.querySelector('.active-specie').innerText; // get the gas specie name from the '.active-specie' element in the '.yearly-aqi' element
  var data = new Blob([text], {type: 'text/html'}); // create a Blob object for our output file
  var url = window.URL.createObjectURL(data); // get data url from the blob
  element.setAttribute('href', url); // set the data url to the href of the hyperlink element created at L3
  element.setAttribute('download', (city + '_' + specie + '.html').toLowerCase()); // set download attribute and file name to the hyperlink
  element.style.display = 'none'; // set the css display attribute of the hyperlink element to none
  document.body.appendChild(element); // append the hyperlink element into the 'body' of page
  element.click(); // mimic a user click event on the hyperlink element to trigger download
  document.body.removeChild(element); // remove the hyperlink element
}() // execute the defined function (IIFE)