正文 

当前位置： 首页 > 问答 >

Chrome 扩展程序未在 YouTube 的浏览器导航中加载

     2023-02-24     271

关键词：

【中文标题】Chrome 扩展程序未在 YouTube 的浏览器导航中加载【英文标题】：Chrome extension is not loading on browser navigation at YouTube 【发布时间】：2013-08-26 05:13:34 【问题描述】：

假设我有一个扩展程序，当您到达 YouTube 视频页面时会加载。我注意到，当您使用 Chrome 按钮来回导航时，该扩展程序很可能不会加载。

例如，我有 2 个文件，清单：


    "name": "back forth",
    "version": "0.1",
    "manifest_version": 2,
    "description": "back forth",
    "permissions": ["storage", "*://www.youtube.com/watch*"],
    "content_scripts": [
        
            "matches": ["*://www.youtube.com/watch*"],
            "js": ["contentscript.js"]
        
    ]

和内容脚本

alert("loaded");

来回导航时，警报并不总是出现。我该如何克服这个问题，以便每次都加载扩展程序？

【问题讨论】：

类似***.com/a/34100952/72321 【参考方案1】：

YouTube 已开始试用基于 pushState 的导航。通常，只能通过注入拦截对history.replaceState / history.pushState 的调用的代码（或通过在后台页面中使用chrome.webNavigation.onHistoryStateUpdated 事件）在内容脚本中检测到此类导航。

此答案的其余部分特定于 YouTube。 YouTube 在加载过程中会在页面顶部显示一个（红色）进度条。此进度条使用 CSS 过渡动画。由于转换事件冒泡，您可以将转换事件侦听器绑定到<body>，并在这些情况下检查导航。

您必须将内容脚本插入到*://www.youtube.com/* 而不是*://www.youtube.com/watch*，因为pushState 可用于从/ 导航到/watch..。

function afterNavigate() 
    if ('/watch' === location.pathname) 
        alert('Watch page!');
    

(document.body || document.documentElement).addEventListener('transitionend',
  function(/*TransitionEvent*/ event) 
    if (event.propertyName === 'width' && event.target.id === 'progress') 
        afterNavigate();
    
, true);
// After page load
afterNavigate();

注意：此方法取决于插入进度条的事实。每当 Google 决定重命名进度条的 ID 或完全删除进度条时，您的代码都将停止工作。

注意 2：这仅适用于活动标签。如果需要在tab没有聚焦的情况下检测导航变化，则需要绑定window.onfocus和window.onblur事件，并检查document.title在这两个事件之间是否发生了变化。

【讨论】：

感谢您的回答。使用这种方法它可以工作，但它不像DOMContentLoaded那么早，看起来这相当于load，有没有检测到DOMContentLoaded-like点？ @Noitidart 如果你真的想尽快得到通知，你可以绑定到transitionstart 事件，轮询文档更改（使用setTimeout 或setInterval）。找到所需元素后，取消注册 transitionstart 事件 + 停止轮询 + 调用自定义回调。为确保不浪费 CPU 周期，请将其与 transitionend 事件结合使用；如果您的轮询逻辑此时未检测到任何内容，请移除事件侦听器，停止轮询并调用回调。 天才的想法@RobW 谢谢！我尝试添加 window.onpopstate = function(e) console.log(e) 我认为这可以解决问题，但我没有收到任何回调。 @sports location.path 打错了，应该是location.pathname。 @Noitidart 是的，nsIWebProgressListener 可能相当于 Firefox 中的 chrome.webNavigation.onHistoryStateUpdated（但仅在主/后台脚本中，而不在内容脚本中，就像 Chrome 一样）。

反应开发工具未在 Chrome 浏览器中加载

】反应开发工具未在Chrome浏览器中加载【英文标题】：reactdevtoolsnotloadinginChromebrowser【发布时间】：2014-12-0811:03:22【问题描述】：我正在调试一个使用React.js的应用程序，Chrome扩展列表清楚地显示已安装React开发工具，当我访问htt... 查看详情

从 Chrome 扩展程序控制 YouTube 播放器

】从Chrome扩展程序控制YouTube播放器【英文标题】：ControlYouTubeplayerfromaChromeextension【发布时间】：2015-09-1522:45:30【问题描述】：我正在开发一个GoogleChrome扩展程序，它需要接管YouTube视频的所有控件（播放、暂停、下一个、上一个... 查看详情

如何使用 chrome 扩展编辑 YouTube 的字幕

】如何使用chrome扩展编辑YouTube的字幕【英文标题】：howtoeditthesubtitleofYouTubewithchromeextension【发布时间】：2020-07-3014:11:36【问题描述】：我想编辑youtube视频的字体样式我在youtube.com的检查模式中看到带有ytp-caption-segment的span标签包... 查看详情

了解chrome扩展程序开发--摘抄

了解Chrome扩展程序开发2018-01-11 边城到此莫若 鸡蛋君说前端首先，我尝试来用简单几句话描述一下Chrome扩展程序：Chrome扩展主要用于对浏览器功能的增强，它强调与浏览器相结合。比如Chrome扩展可以在浏览器的工具栏和... 查看详情

我想创建 chrome 扩展，每次 youtube 播放视频时都会弹出

】我想创建chrome扩展，每次youtube播放视频时都会弹出【英文标题】：Iwanttocreatechromeextensionthatpopupseverytimewhenyoutubeplayavideo【发布时间】：2013-11-2410:08:23【问题描述】：您好，我想创建在播放视频时弹出的扩展程序。当电影全屏时... 查看详情

chrome浏览器怎么导出已安装的扩展程序为crx文件

我们都知道，如今Chrome浏览器的应用商店都打不开，进不去了，需要翻出去才能上。所以对于一些已经安装过的扩展程序（插件）想导出保存一下。因为Chrome默认安装在C盘，怕重装系统后又要重新安装这些插件了。那么，怎么... 查看详情

在 chrome 扩展中获取 YouTube 频道 ID

】在chrome扩展中获取YouTube频道ID【英文标题】：GetYouTubechannelIDinchromeextension【发布时间】：2021-04-0209:00:42【问题描述】：我想为YouTube制作一个chrome扩展。我需要获取用户的YouTube频道ID（如果存在）。怎么做？我尝试获取google帐... 查看详情

如何在chrome浏览器安装第三方扩展

简单教你·Chrome浏览器如何安装第三方扩展程序谷歌在2012年ChromeV21+开始禁止第三方扩展静默安装，2014年ChromeV30+开始任何非Chrome网上应用店(ChromeWebStore)下载的扩展将自动停用。自己瞎折腾一个Chrome插件crx打包之后拖进chrome://exten... 查看详情

编写一个chrome浏览器扩展程序

...）以及对网页元素的交互，甚至从web服务器获取数据，以Chrome浏览器扩展为例，扩展文件包括：一个manifest文件(主文件,json格式)至少一个HTML文件(主题可以没有HTML文件)JavaScript文件(可选，非必须)任何其他你需要的文件(比如图片)... 查看详情

iOS 共享扩展无法从 Chrome 获取共享 URL

...我正在尝试为我的应用实现共享扩展。它在safari浏览器和youtube应用程序中运行良好（即，当我从这些应用程序共享时，我得到public.url，它是要共享的url。当我在chrome中尝试相同时，它没有显示扩展名。 查看详情

制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站

 chrome地址栏输入chrome://extensions/，可以看到当前谷歌浏览器的全部扩展程序开启开发者模式，可以加载自己制作的扩展程序，或者把自己制作的扩展程序打包 打包第一扩展程序，生成crx插件和pem密钥  查看详情

Flexbox溢出未在Chrome中扩展父容器

】Flexbox溢出未在Chrome中扩展父容器【英文标题】：FlexboxoverflownotexpandingparentcontainerinChrome【发布时间】：2017-09-2517:50:34【问题描述】：我使用Flexbox构建了一个树视图，但我无法让布局在Chrome中工作。溢出不起作用并破坏布局。... 查看详情

axure谷歌浏览器chrome扩展程序下载及安装方法

...记得给浏览器安装Axure扩展程序哦。 Axure谷歌浏览器Chrome扩展程序使用说明：打开谷歌内核的浏览器，在浏览器中地址栏中输入chrome://extensions/ 或者点击浏览器的右 查看详情

Chrome 扩展程序可在不同的浏览器中打开特定的 URL [关闭]

】Chrome扩展程序可在不同的浏览器中打开特定的URL[关闭]【英文标题】：ChromeextensiontoopenupaspecificURLinadifferentbrowser[closed]【发布时间】：2015-04-2112:23:07【问题描述】：提前感谢您的任何帮助！我想知道是否有一个Chrome扩展程序可... 查看详情

谷歌浏览器chrome的扩展程序安装目录(代码片段)

默认安装在：C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\UserData\\Default\\Extensions\\推荐一种快捷方法。在谷歌浏览器的扩展中chrome://extensions/可以复制ID，通过Everything快速搜索工具查找某个扩展的文件夹 查看详情

谷歌浏览器chrome的扩展程序安装目录(代码片段)

默认安装在：C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\UserData\\Default\\Extensions\\推荐一种快捷方法。在谷歌浏览器的扩展中chrome://extensions/可以复制ID，通过Everything快速搜索工具查找某个扩展的文件夹 查看详情

如何从chrome浏览器中导出扩展程序为crx文件？

1.chrome扩展程序的安装目录在哪里？在哪个文件夹？找到插件所在的文件夹。默认位置未为C:Users“你的用户名”AppDataLocalGoogleChromeUserDataDefaultExtensions，也可以先找到chrome安装位置，再点“UserData”-"Default"--"Extensions"... 查看详情

使用 Chrome 扩展程序在 Google Chrome 浏览器中访问搜索查询文本

】使用Chrome扩展程序在GoogleChrome浏览器中访问搜索查询文本【英文标题】：AccessingSearchQueryTextinGoogleChromeBrowserwithChromeExtension【发布时间】：2015-07-1709:07:20【问题描述】：我正在为自己构建一个Chrome扩展程序。我想访问我的搜索... 查看详情