小编and*_*ban的帖子

我在受信任的 Web 活动中打开我的页面，我想检测它何时在其中打开以自定义行为和用于分析目的。如何检测正在从 TWA 打开的页面？

我使用 Typescript 模板创建了一个普通的 create-react-app。
我添加了以下行：

<dialog inert></dialog>

该应用程序甚至无法运行，因为打字稿抛出错误：

src/App.tsx:9:15 TS2322 中出现错误：输入 '{children: never[]; 惰性：真实；}' 不可分配给类型“DetailedHTMLProps<DialogHTMLAttributes, HTMLDialogElement>”。类型“DetailedHTMLProps<DialogHTMLAttributes, HTMLDialogElement>”上不存在属性“inert”。

我想修复它而不是忽略它，但即使忽略似乎也不起作用。

// @ts-ignore
return (<dialog inert></dialog>);

为 Chrome 自定义选项卡指定颜色似乎有点奇怪。您可以指定三种颜色：工具栏颜色、“辅助工具栏”颜色和导航栏颜色。

似乎有两种方法可以控制这些。一种是直接在 Builder 中设置这三个属性，如下所示：

val builder = CustomTabsIntent.Builder()
builder.setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))
builder.setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
builder.setNavigationBarColor(ContextCompat.getColor(context, R.color.colorPrimary))
val customTabsIntent = builder.build()

另一种是指定参数和方案。存在三种可能的方案：COLOR_SCHEME_DARK、COLOR_SCHEME_LIGHT和COLOR_SCHEME_SYSTEM。COLOR_SCHEME_SYSTEM我认为，让系统决定是否使用深色或浅色方案，而其他两个则强制使用深色或浅色方案。当您指定参数时，您可以为浅色方案或深色方案设置这些颜色参数（工具栏、辅助工具栏、导航栏）。我认为如果你强制使用深色方案，你会为深色方案指定参数。如果您使用系统方案，则可以指定浅色参数和深色参数，并且根据系统决定使用深色或浅色方案，将使用适当的值。无论如何，这是我最好的猜测。

一个例子可能如下所示：

val builder = CustomTabsIntent.Builder()
builder.setColorScheme(COLOR_SCHEME_DARK)
val darkParams = CustomTabColorSchemeParams.Builder()
    .setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))
    .setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
    .setNavigationBarColor(ContextCompat.getColor(context, R.color.colorPrimary))
    .build()
builder.setColorSchemeParams(COLOR_SCHEME_DARK, darkParams)
val customTabsIntent = builder.build()

（我尝试了不同的选项来设置配色方案和设置参数使用的方案）。

有趣的是，如果你尝试的话，builder.setColorSchemeParams(COLOR_SCHEME_SYSTEM, params)你会崩溃：java.lang.IllegalArgumentException: Invalid colorScheme: 0。显然这是一个功能，而不是一个错误。您应该为深色或浅色方案指定颜色参数，而不是系统，系统会自动在浅色和深色之间进行选择。

我相信您也可以同时使用这两种方法。仅当无法使用第二种方法（为配色方案设置颜色参数）时，才使用第一种方法（直接在构建器中设置颜色值）。根据文档，

为了保持与不支持此 API 的浏览器的兼容性，请提供默认值。

这就是背景信息。这是我得到的结果。

要更改工具栏颜色，请使用第一种方法（builder.setToolbarColor)。简单易行。但使用第二种方法（CustomTabColorSchemeParams）不会执行任何操作。

我还没有实际测试过“辅助工具栏”。我不确定那是什么。它似乎是一个可选的底部工具栏，尽管它的使用方式已被弃用RemoteViews. 我认为这与大多数人无关。

这两种方法都不会影响导航栏颜色。 …

我正在构建包含<dialog>元素的 Web 组件。我使用 打开对话框HTMLDialogElement.showModal()，这会将对话框移动到顶层。对话框的某些内容与顶层不兼容，即 Google Recaptcha，它在对话框下方呈现。

许多其他人已经注意到对话框元素和 ReCaptcha 的相同问题，一种方法似乎是使用HTMLDialogElement.show()而不是 showModal。从可用性的角度来看，我认为这是可以接受的，但从可访问性的角度来看，我真的很喜欢它提供的好处HTMLDialogElement.showModal()。也就是说，使所有其他 HTML 元素变得惰性，从而成为非交互性并从可访问性树中隐藏。通过使用inert特性或属性，我可以自己使 HTML 文档的某个子树变得惰性。

截至今天（2023 年 10 月 31 日），MDN和HTML Living 规范都表明“摆脱惰性”是可能的，但这对于 HTML 作者来说似乎不可能。.show()例如，使用 Chrome/Edge，使用以下 HTML，当我尝试通过将对话框的 inert 属性设置为 false 来故意“逃避惰性”时，如果使用打开，我无法与对话框内的元素进行交互。

HTML作者是否可以通过这种方式摆脱惰性？

const dialogOpener = document.getElementById("dialogOpener")
const modalOpener = document.getElementById("modalOpener")
const dialogCloser = document.getElementById("dialogCloser")
const testDialog = document.getElementById("testDialog")

dialogOpener.addEventListener("click", evt => {
  testDialog.show()
  document.body.inert = true
  testDialog.inert = false
})

modalOpener.addEventListener("click", evt => …

我正在编写代码,使用gcloud-node将使用node-fetch获取的文件上传到Google云端存储中的存储桶.

到目前为止一切正常,但我无法找到如何Content-Type在GCloud上设置文件,否则文件下载为application/octet-stream.

这是我到目前为止的代码:

function saveImage(response, destFile) {
  return new Promise((resolve, reject) => {
    if (response.status !== 200) {
      reject(new Error('Bad Response'));
    }

    // How do I set this on the file uploaded to the bucket?
    const contentType = response.headers.get('Content-Type');

    try {
      const file = bucket.file(destFile);
      const writeStream = file.createWriteStream();

      writeStream.on('error', err => {
        reject(err);
      });

      writeStream.on('finish', () => {
        resolve(getPublicUrl(destFile));
      });

      response.body.pipe(writeStream);
    } catch (e) {
      reject(e);
    }
  });
}

就像其他人一样，我正在努力支持 Chrome 中即将到来的第 3 方 cookie 更改。我的用户（其他域上的其他网站）将我的网页包含在 iframe 中。在我的页面中，我设置了一个 cookie（只有 iframe 需要在该父网站的上下文中看到该 cookie，因此实际上不是第 3 方 cookie）。

这在 Firefox 中工作正常（可能已经禁用了第 3 方 cookie），但是当在隐身模式下使用 Chrome 时，禁用第 3 方 cookie，我无法设置我的 cookie。

下面是一个例子。如果您重新加载父级，cookie 就会丢失（实际上它永远不会被设置，即使在重新加载之前也是如此）。Chrome 开发工具中没有警告，但您可以在“应用程序”选项卡中看到 cookie 从未被设置。

有什么想法为什么这在 Firefox 中有效，但在禁用 3rd party cookie 的 Chrome 隐身模式中无效？有办法让这个工作吗？

父页面（domain1.com）：

<html>
    <head>
        <style>
            iframe.myframe {
                width: 800px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <iframe class="myframe" src="https://domain2.com/my_thing.html"/>
    </body>
</html>

子页面（domain2.com）：

<html>
    <head>
        <style> body{ background: blue; } </style>
    </head>
    <body>
        <script>
            let num = getCookie('num');
            console.log('Pre-change: '+num);
            num …