在 Shopify Inbox 上隐藏 Shopify 的虚假通知

Question

访问影子根有点困难，但下面的解决方案将删除shopify收件箱应用程序上的虚假通知图标。

Answer 1

这将等到聊天加载完毕后注入 CSS 来隐藏它。

document.addEventListener('DOMContentLoaded', () => {
  const observer = new MutationObserver(() => {
    const shopifyChat = document.querySelector('#ShopifyChat');

    if (shopifyChat && shopifyChat.shadowRoot) {
      const shadowRoot = shopifyChat.shadowRoot;

      // Check if the style is already injected
      if (!shadowRoot.querySelector('#hide-chat-notification')) {
        // Create a <style> element
        const style = document.createElement('style');
        style.id = 'hide-chat-notification';
        style.textContent = `
          .chat-notification {
            display: none !important;
          }
        `;

        // Append the style to the ShadowRoot
        shadowRoot.appendChild(style);
      }

      // Disconnect observer once the style is injected
      observer.disconnect();
    }
  });

  // Observe the DOM for changes
  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
});