未设置window.innerWidth

Question

I'm currently porting https://github.com/brunolemos/simplified-twitter to Safari.

I'm injecting this content script into Twitter:

function update(win = window) {
  window.innerWidth = Math.min(win.outerWidth, 800)
  document.body.style.paddingLeft = win.innerWidth >= 800 ? '176px' : null
}

function triggerUpdate() {
  setTimeout(() => window.dispatchEvent(new Event('resize')), 1)
}

window.onresize = e => update(e.target || window)
window.onload = triggerUpdate
document.addEventListener('visibilitychange', triggerUpdate)

triggerUpdate()

The function update() works, since when I check document.body.style.paddingLeft in the console, it says 176px.

But when I check window.innerWidth it tells me 1680px instead of 800px.

What am I doing wrong?

Answer 1

Try this.

function update() {
  document.body.style.paddingLeft = window.outerWidth >= 800 ? '176px' : null
}

function triggerUpdate() {
  setTimeout(() => window.dispatchEvent(new Event('resize')), 1)
}

window.onresize = update
window.onload = triggerUpdate
document.addEventListener('visibilitychange', triggerUpdate)

triggerUpdate()

Answer 2

This was kind of tricky. Apparently when I'm modifying window, I'm not actually modifying the window of twitter.com

To do that, I would need to inject a tag into twitter.com.

To do this, I can create a second script (call it inject.js), add it to the Content Scripts Array in the Info.plist and write this in it:

const script = document.createElement('script')
script.src = safari.extension.baseURI + "script.js"
document.documentElement.appendChild(script)

This will create a new script element, assign the URI to the injected script to its src attribute and append it to the document.