How to create a small bookmarklet tool for View web page styles?
javascript: (function() {
function describeSheet(oDoc, oSheet) {
var oLi = oDoc.createElement('li');
try {
void(oSheet.href);
} catch (e) {
oLi.appendChild(oDoc.createTextNode('Stylesheet with access forbidden'));
return oLi;
}
if (oSheet.href) {
oLi.appendChild(oDoc.createTextNode('Stylesheet '));
var oHref = oDoc.createElement('a');
oHref.setAttribute('href', oSheet.href);
var oShortHref = oSheet.title ? oSheet.title : ((oSheet.href.indexOf('data:') == 0) ? oSheet.href : oSheet.href.replace(/^.*\//, '').replace(/\.[^\.]*$/, ''));
oShortHref = oShortHref ? oShortHref : 'untitled';
oShortHref = (oShortHref.length < 40) ? oShortHref : (oShortHref.substring(0, 18) + '...' + oShortHref.substring(oShortHref.length - 19));
oHref.appendChild(oDoc.createTextNode(oShortHref));
oLi.appendChild(oHref);
} else {
oLi.appendChild(oDoc.createTextNode('Inline stylesheet'));
}
oLi.appendChild(oDoc.createTextNode(' (' + ((oSheet.ownerNode && oSheet.ownerNode.hasAttribute('rel') && oSheet.ownerNode.getAttribute('rel').indexOf('alternate') + 1) ? 'alternate - ' : '') + (oSheet.disabled ? 'disabled' : 'enabled') + ') '));
oLi.appendChild(getMediaList(oDoc, oSheet));
try {
oLi.appendChild(getRulesInBlock(oDoc, oSheet, true));
} catch (f) {
oLi.appendChild(oDoc.createTextNode(' (access forbidden)'));
}
return oLi;
}
function locateURLs(oDoc, oBase1, oBase2, oStr) {
oBase1 = oBase1 ? oBase1 : oBase2;
try {
var oSp, oDF = oDoc.createDocumentFragment(),
startQ, capURL, oLnk;
var oLn = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
oLn.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'base', oBase1);
while (sP = oStr.match(/(url\(\s*)((\x22)([^\x22]*)\x22|(\')([^\']*)\'|([^\(\)\x22\']([^\(\)]*[^\(\)\s])?))(\s*\))/i)) {
startQ = sP[3] ? sP[3] : (sP[5] ? sP[5] : '');
capURL = sP[4] ? sP[4] : (sP[6] ? sP[6] : (sP[7] ? sP[7] : ''));
oDF.appendChild(oDoc.createTextNode(RegExp.leftContext + sP[1] + startQ));
oLn.setAttribute('href', capURL);
oLnk = oDoc.createElement('a');
oLnk.setAttribute('href', oLn.href);
oLnk.appendChild(oDoc.createTextNode(capURL));
oDF.appendChild(oLnk);
oDF.appendChild(oDoc.createTextNode(startQ + sP[9]));
oStr = RegExp.rightContext;
}
if (oStr) {
oDF.appendChild(oDoc.createTextNode(oStr));
}
} catch (rS) {
return oDoc.createTextNode(oStr);
}
return oDF;
}
var canHaveURL = '|background|background-image|content|list-style|list-style-image|cursor|src|cue|cue-before|cue-after|border-image|';
function getStylesInRule(oDoc, oRule) {
var oDL = oDoc.createElement('dl');
for (var i = 0, j, k; i < oRule.style.length; i++) {
j = oRule.style.item(i);
var oDt = oDoc.createElement('dt');
var oDd = oDoc.createElement('dd');
oDL.appendChild(oDt);
oDL.appendChild(oDd);
k = oRule.style.getPropertyPriority(j);
oDt.appendChild(oDoc.createTextNode(j + ':'));
if (canHaveURL.indexOf('|' + j + '|') + 1 && oRule.style.getPropertyValue(j).match(/url\(/i)) {
oDd.appendChild(locateURLs(oDoc, oRule.parentStyleSheet.href, location.href, oRule.style.getPropertyValue(j)));
oDd.appendChild(oDoc.createTextNode((k ? (' !' + k) : '') + ';'));
} else {
oDd.appendChild(oDoc.createTextNode(oRule.style.getPropertyValue(j) + (k ? (' !' + k) : '') + ';'));
}
}
return oDL;
}
function getMediaList(oDoc, oRule) {
if (!oRule.media.length) {
return oDoc.createTextNode('');
}
var oUL = oDoc.createElement('ul');
oUL.className = 'medlist';
for (var i = 0; i < oRule.media.length; i++) {
var oLi = oDoc.createElement('li');
oUL.appendChild(oLi);
oLi.appendChild(oDoc.createTextNode(oRule.media.item(i)));
}
return oUL;
}
function getRulesInBlock(oDoc, oBlock, isRoot) {
var oUL = oDoc.createElement('ul');
if (isRoot) {
oUL.className = 'fileroot';
}
for (var n = 0, m; n < oBlock.cssRules.length; n++) {
m = oBlock.cssRules.item(n);
var oLi = oDoc.createElement('li');
oUL.appendChild(oLi);
if (m.type == 1 || m.type == 5 || m.type == 6) {
oLi.appendChild(oDoc.createTextNode(m.selectorText + ' { '));
oLi.appendChild(getStylesInRule(oDoc, m));
oLi.appendChild(oDoc.createTextNode('}'));
} else if (m.type == 2) {
oLi.appendChild(oDoc.createTextNode('@charset \'' + m.encoding + '\';'));
} else if (m.type == 4) {
oLi.appendChild(oDoc.createTextNode('@media '));
oLi.appendChild(getMediaList(oDoc, m));
oLi.appendChild(oDoc.createTextNode(' { '));
oLi.appendChild(getRulesInBlock(oDoc, m));
oLi.appendChild(oDoc.createTextNode('}'));
} else if (m.type == 3) {
oLi.appendChild(oDoc.createTextNode('@import url('));
var oHref = oDoc.createElement('a');
oHref.setAttribute('href', m.styleSheet.href);
oHref.appendChild(document.createTextNode(m.href));
oLi.appendChild(oHref);
oLi.appendChild(oDoc.createTextNode(');'));
oLi.appendChild(getRulesInBlock(oDoc, m.styleSheet, true));
} else if (!m.type) {
oLi.appendChild(oDoc.createTextNode(m.cssText ? m.cssText : '@unknown rule;'));
}
}
return oUL;
}
function listSheets(oDoc, oDocument) {
var oUL = oDoc.createElement('ol');
oUL.className = 'sheetlist';
for (var i = 0, j; i < oDocument.styleSheets.length; i++) {
oUL.appendChild(describeSheet(oDoc, oDocument.styleSheets.item(i)));
}
return oUL;
}
})();
How to use a small bookmarklet tool for View web page styles?
A bookmarklet is essentially a bookmark with embedded JavaScript code that can be executed in a web browser.Decide on the JavaScript code you want to execute within the bookmarklet. This could involve performing specific actions, modifying the current page, or loading additional resources.
Create a new bookmark within your browser. This usually involves right-clicking on your bookmarks/favorites bar and selecting "Add new bookmark." In this step, you'll need to specify a name and location for the bookmark.Edit the newly created bookmark and paste the JavaScript code into the URL or location field of the bookmark. This is the core part of the bookmarklet.
Open a webpage and click on the new bookmarklet in your browser's bookmarks bar to execute the JavaScript code it contains. Ensure that the bookmarklet performs the expected actions.