未设置窗口.内部宽度

Question

我目前正在将 https://github.com/brunolemos/simplified-twitter 移植到 Safari。

我正在将以下内容脚本注入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()

函数 update(( 有效，因为当我在控制台中检查document.body.style.paddingLeft时，它显示 176px。

但是当我检查window.innerWidth它告诉我 1680px 而不是 800px。

我做错了什么？

Answer 1

试试这个。

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

这有点棘手。 显然，当我修改窗口时，我实际上并没有修改 twitter.com 窗口

为此，我需要将标签注入 twitter.com。

为此，我可以创建第二个脚本(称为 inject.js(，将其添加到 Info.plist 中的内容脚本数组中，并在其中编写以下内容：

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

这将创建一个新的脚本元素，将注入脚本的 URI 分配给其 src 属性，并将其附加到文档中。