Exprt XMP website scraped data to file

Add-ons Add-on Support
#1

I am a swift coder, not a JavaScript coder. But, with the help of ChatGPT I am slowly getting there.

I am trying to create a Firefox extension that will export an XMP file scaped from specific data on a webpage.

const parser = new DOMParser();
const xmpDocument = parser.parseFromString(xmpData, 'text/xml');

const subjectReference = xmpDocument.querySelector('Iptc4xmpCore\\:SubjectReference').textContent;
const headline = xmpDocument.querySelector('photoshop\\:Headline').textContent;
const description = xmpDocument.querySelector('dc\\:description rdf\\:li').textContent;
const subject = xmpDocument.querySelector('dc\\:subject rdf\\:li').textContent;

console.log('Subject Reference:', subjectReference);
console.log('Headline:', headline);
console.log('Description:', description);
console.log('Subject:', subject);

I have the base manifest.json, popup HTML and JS files for a basic FF extension, but not familliar with the process.

Can anybody please advise ?

#2

I have the following code:

// Create a new XMP document
const xmpDocument = document.implementation.createDocument(null, 'x:xmpmeta', null);

// Create the root element
const xmpRoot = xmpDocument.documentElement;
xmpRoot.setAttribute('xmlns:x', 'adobe:ns:meta/');
xmpRoot.setAttribute('x:xmptk', 'XMP toolkit 2.9-9, framework 1.6');

// Create RDF element
const rdf = xmpDocument.createElementNS('http://www.w3.org/1999/02/22-rdf-syntax-ns#', 'rdf:RDF');
xmpRoot.appendChild(rdf);

// Create Iptc4xmpCore element
const iptcElement = xmpDocument.createElement('rdf:Description');
iptcElement.setAttribute('rdf:about', '');
iptcElement.setAttribute('xmlns:Iptc4xmpCore', 'http://iptc.org/std/Iptc4xmpCore/1.0/xmlns/');
rdf.appendChild(iptcElement);

// Create SubjectReference element
const subjectReference = xmpDocument.createElement('Iptc4xmpCore:SubjectReference');
subjectReference.textContent = 'http://speiselift.com/2011/05/die-tasse-im-fuchspelz/';
iptcElement.appendChild(subjectReference);

// Create SubjectCode element
const subjectCode = xmpDocument.createElement('Iptc4xmpCore:SubjectCode');
iptcElement.appendChild(subjectCode);

// Create Bag element
const bag = xmpDocument.createElement('rdf:Bag');
subjectCode.appendChild(bag);

// Create Bag's rdf:li element
const li = xmpDocument.createElement('rdf:li');
li.textContent = 'http://speiselift.com/2011/05/die-tasse-im-fuchspelz/';
bag.appendChild(li);

// Create Photoshop element
const photoshopElement = xmpDocument.createElement('rdf:Description');
photoshopElement.setAttribute('rdf:about', '');
photoshopElement.setAttribute('xmlns:photoshop', 'http://ns.adobe.com/photoshop/1.0/');
rdf.appendChild(photoshopElement);

// Create Headline element
const headline = xmpDocument.createElement('photoshop:Headline');
headline.textContent = 'Die Tasse im Fuchspelz Speiselift';
photoshopElement.appendChild(headline);

// Create DC element
const dcElement = xmpDocument.createElement('rdf:Description');
dcElement.setAttribute('rdf:about', '');
dcElement.setAttribute('xmlns:dc', 'http://purl.org/dc/elements/1.1/');
rdf.appendChild(dcElement);

// Create Description element
const description = xmpDocument.createElement('dc:description');
const alt = xmpDocument.createElement('rdf:Alt');
const li = xmpDocument.createElement('rdf:li');
li.setAttribute('xml:lang', 'x-default');
li.textContent =
  'Gegen diesen Pelz haben Tierschützer sicher nichts einzuwenden: Das Pariser Label Kitsuné hat als Hommage an den eigenen Namen (bedeutet Rotfuchs auf Japanisch) diese Tasse mit dem Namen Fur Mug kreiert.';
alt.appendChild(li);
description.appendChild(alt);
dcElement.appendChild(description);

// Create Subject element
const subject = xmpDocument.createElement('dc:subject');
const subjectBag = xmpDocument.createElement('rdf:Bag');
const subjectLi = xmpDocument.createElement('rdf:li');
subjectLi.textContent = 'pax';
subjectBag.appendChild(subjectLi);
subject.appendChild(subjectBag);
dcElement.appendChild(subject);

// Serialize the XMP document to a string
const xmpSerializer = new XMLSerializer();
const xmpString = xmpSerializer.serializeToString(xmpDocument);

// Output the XMP data
console.log('Generated XMP data:');
console.log(xmpString);
#3

The AI is great for programming new things, but you should still read some high level architecture to understand how it works:

MDN is a great source of info in that matter.

And for actual development use web-ext tool:

After it works locally, you simply zip the source code (web-ext can do it too) and submit it to the page.

#4

I know.

I did try to learn JS earlier in the year, but coming from a type safe language it felt like a massive step back.

#5

Yeah, JavaScript is insane :smiley:.
I highly recommend TypeScript, but setting it up may be tricky…