首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

html页面没意思,来挑战chrome插件开发

version:本插件的版本,和发布相关 action:点击图标时,设置一些交互 16、32、48、128 default_icon:展示图标 default_popup:popup.html,一个弹窗页面...default_title:显示的标题 permissions:拥有的权限 tabs:监听浏览器tab切换事件 options_ui background: service_worker:设置打开独立页面...options页,就是插件的设置页面,有2个入口 1:点击插件详情,找到扩展程序选项入口 image.png 2插件图标,点击右键,选择 ‘选项’ 菜单 image.png 可以看到设置的option.html...很多插件都是使用newtab进行自定义打开的tab页,比如掘金的浏览器插件,打开新页面就是掘金网站插件[6]。..."); } ); 然后在创建自定的Panel.html和sidebar.html页面

37211
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何感知 WebKit 页面切换

    背景 通常在 WKWebView 打开一个页面,收到页面数据时,代理方法可感知这个时机: -webView:didCommitNavigation: 但若是改变页面 hash (也就是位置标识符"#")...对于改变页面 hash 打开另一页面场景,是在同一个 Document,FrameLoader 作为专门处理页面加载的地方,应该是有处理目标页面是否是同一 Document 的代码分支,扫描一下就找到了一个可疑的函数...@end 粗略分析下源码,当 navigationType 这个枚举是 _WKSameDocumentNavigationTypeAnchorNavigation 时就表示完成了这次改变 hash 的页面切换...WKWebView 的 navigationDelegate 所属类下面实现 _webView:navigation:didSameDocumentNavigation: 方法就能捕获到改变 hash 的页面切换的操作了...,和 -webView:didCommitNavigation: 配对可完整感知 WKWebView 的页面切换完成时机。

    1.5K20

    如何感知 WebKit 页面切换

    背景 通常在 WKWebView 打开一个页面,收到页面数据时,代理方法可感知这个时机: -webView:didCommitNavigation: 复制代码 但若是改变页面 hash (也就是位置标识符...对于改变页面 hash 打开另一页面场景,是在同一个 Document,FrameLoader 作为专门处理页面加载的地方,应该是有处理目标页面是否是同一 Document 的代码分支,扫描一下就找到了一个可疑的函数...复制代码 粗略分析下源码,当 navigationType 这个枚举是 _WKSameDocumentNavigationTypeAnchorNavigation 时就表示完成了这次改变 hash 的页面切换...WKWebView 的 navigationDelegate 所属类下面实现 _webView:navigation:didSameDocumentNavigation: 方法就能捕获到改变 hash 的页面切换的操作了...,和 -webView:didCommitNavigation: 配对可完整感知 WKWebView 的页面切换完成时机。

    99700

    webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)

    最近做一个web页面,希望在手机上能滑动切换页面,第一次这种要求,在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用,于是选择这个插件,在使用这个插件的过程也遇到了很多问题,如滚动条很长...,体验不好,最后采用js来控制高度,在此页面中也采用了bootstrap-table插件来固定表头,采用js动态的设置高度,当页面高度小时,有滚动条,页面高时就完全展示,为了体验好,当滚动到第一个页面底部时...,滑动切换第二个页面的顶部,需要scrollTop实现 页面结构 <div class="swiper-pages swiper-container...echart图表,需要再调用swiper<em>插件</em>后再init 和setoption图表,否则图表在<em>页面</em><em>切换</em>时不显示 var myLineChart = echarts.init(document.getElementById...theme); myLineChart.setOption(option2); ObjectResize(myLineChart.resize); bootstrap-table<em>插件</em>用到

    2.3K20

    PHP压缩html页面

    html页面压缩之后,可以大大提升页面的加载速度,下面的压缩代码去掉了页面中的所有空格、注释、制表符、换行符等等比较多余的字符,下面的代码是写以在thinkphp5中为例的,不过在他PHP程序是通用的...view_replace_str'))             ->fetch($data, $this->vars, $this->replace);                  /* 自定义页面压缩...php echo ', $outputHtml)));         }                  return $outputHtml;     } 2、在页面公共部分或者你需要使用页面压缩的模块设置一个宏变量进行标记...,我的如下     //设置开启页面压缩,true为开启页面压缩,false相反     define('IS_PAGE_ZIP', false); 3、最后压缩后的效果如下图:

    8.1K10

    AngularJS应用页面切换优化方案

    本文所说的页面切换指的就是这个路由机制,即根据不同的URL展示不同的视图。 有一种非常常见的场景:在切换至新页面后,需要通过AJAX调用从服务器请求一些数据,然后根据这些数据来展示页面。...如果未做任何处理,那么页面会先加载新页面html模版,但此时模板中的数据model还并没有被请求,因此会有一段时间显示空数据,非常影响用户体验。...点击一个手机名称进入详细信息页面,同样是一开始只显示了html模板的内容,然后才将参数数据填充到页面上。过程中页面会出现抖动,非常影响用户体验。...PhoneDetailCtrl的代码如下: 这样,就可以在页面跳转之前获取到请求的数据了。 为页面加入切换动画 为了让页面间的切换更平滑,可以在页面切换加入过渡动画。...本文提出了两点技巧让AngularJS应用在页面切换时更加自然平滑。。 完整demo下载地址:AngularJS应用页面切换优化方案

    1.9K100

    EasyNVR H5无插件直播方案前端架构之:直播页面和视频列表页面切换的问题

    关于直播页面和视频列表页面切换 为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息。一般多会分为列表展示和实时的视频直播展示。 ? ?...因此在进行两个视图之间的切换的时候,不仅需要考虑外表视图的变化,更应该注意到视频流的关闭;当我需要在实时四分屏视图向列表视图进行切换的时候,需要将当前四分屏视图中所有的视频流全部停掉。...为了保持初始播放器样式的统一,在四分屏播放页面每一次播放视频流时都是重新加载初始化videojs。...因此当需要进行切换到列表视图时需要判断当前四个播放窗口中,哪一个窗口正在进行视频播放,以便于在切换视图时将对应窗口的视频流停掉。...这个信息会根据窗口的播放状态而实时的变化; var players = []; 当需要进行切换到列表视图时,只需要将players里面的元素对应的窗口中的视频流停掉即可; $.each(players

    98110
    领券