How to make a browser recognize a custom user-defined tag?

1.4k Views Asked by At

I am trying to develop a plugin/extension for a browser (Firefox or IE or Chrome). The purpose of this is that the plugin/extension should recognize one of my own-custom tags.

Eg:

<myowntag1>
     ...
     <mysubtag1  ... />
     ...
</myowntag1>

How do I make a browser recognize this using a plugin/extension?

4

There are 4 best solutions below

0
On BEST ANSWER

The idea of being able to embed arbitrary XML (in a user-defined namespace) within an XML page, and have the namespace somehow associated to plug-in code that understands this XML vocabulary, is a dream which many of us have shared. Unfortunately the group defining HTML5 (WHATWG) are moving in the opposite direction: they don't see this kind of extensibility as a requirement, and embedding XML in HTML is becoming harder rather than easier. The only exception is for an XML vocabulary like SVG or MathML that for some reason appeals to the folks on WHATWG and gets endorsed by them.

2
On

Your Question reminds me on the thread How XML used and interpreted? - your browser has no api for unknown tags, but it has one for transformation of xml to anything else (including html) named XSLT. The only way I know to do what you want is to write your webpage as XHTML (which is XML and is possible even with HTML5). Be aware that the first line containing the XML Declaration is at its place and add a second line containing the call for a XSLT stylesheet. Write this stylesheet - it must copy everything from the XML/XHTML source page except your self defined tags. These must be transformed into the desired HTML output. This solution works with every major browser, though it may be less complicated to use the transformed HTML from start. To open a new tab you could use the "target" attribute of the link (<a href="http://test.com" target="newtab">Test</a>). This opens a new tab or window depending on your browser preferences.

7
On

Seems like a doable task if you parse tags manually from a javascript. This is how Facebook FBML namespace tags are implemented for example.

Lets say we have this html with custom tag custom:header that should turn into h1:

<html xmlns:custom>
<body>
    <custom:header text="header text"></custom:header>
</body>
</html>

In a content script we can do:

$el = $("custom\\:header");
$el.html($("<h1>").text($el.attr("text")));

(I am using jQuery here). This will turn our tag into:

<custom:header text="header text">
    <h1>header text</h1>
</custom:header>

You can also inject a css file for your custom tags:

custom\:header {
    color:red;
}
0
On

Use a custom DTD which is referenced in the doctype, such as the example using mymymy.dtd:

<!DOCTYPE html SYSTEM "mymymy.dtd">

Be aware of the pros and cons before uploading it to a server: