Search code examples
javascriptgoogle-chromepdfweb-component

Accessing PDF embed element in new Chrome PDF viewer

I've worked with embedded PDFs in Chrome PDF viewer for extension development, and recently had a look at what was possible through changes to the <embed> DOM element: it was possible to alter the page being viewed through appending #page=2 etc.

For example

embed_el = document.createElement('embed')
pdf_url = 'https://www.tjvantoll.com/speaking/slides/Web-Components-Catch/San-Francisco/web-components-catch.pdf'
embed_el.src = pdf_url
document.body.innerHTML = '' // discard whatever page you're viewing
document.body.appendChild(embed_el)

adds an embedded viewer in older (pre...47?) Chrome versions, or current Firefox (etc.), which can then be updated with

page_number = '3'
document.querySelector('body embed')
    .setAttribute('src', pdf_url+'#page='+page_number)

Attempting this with the new (as of v.47) Polymer/web component-based Chrome PDF viewer, I get the bizarre response that there's no such accessible DOM element <embed>, it's... a function!

The above code creates and embeds the element regardless, with the TypeError

ⓧ Uncaught TypeError: Cannot use 'in' operator to search for 'rawScopes' in undefined

...but after that there's no apparent accessible connection to the DOM, nor to changes on the embed_el variable.

Example trying to access the PDF <embed> element:

myfuncel = document.querySelector('embed')
▶ function embed
ⓧ Uncaught TypeError: Cannot use 'in' operator to search for 'rawScopes' in undefined

There's no clear way to use this as a function though...

myfuncel()
ⓧ Uncaught TypeError: myfuncel is not a function(…)

What are developers supposed to do now to access the src attribute of an embedded PDF for example?

...and if not too out of scope, I'd be interested in understanding why this change was made, what is achieved by having the embedded PDF element appear as a function.

Solution

  • I think this should be a comment but I don't have enough reputation. In the current version of Chrome, this error happens when selecting any 'embed' or 'object' tag (issue 543932). If you update to the Beta version (48.0.2564.41) this does not happen anymore:

     document.querySelector('embed');
  function anonymous()
    __proto__: Object
    <function scope>

    But even so, updating the src url does not update the page being viewed. If anyone finds more info, I would really appreciate if they share it here.