技术

谷歌浏览器本地插件后续

优化了之前那个谷歌的插件，为了更好的学（mo）习（yu）

之前的文章：使用谷歌浏览器本地插件进行研（mo）究（yu）

现在使用的时候，发现隐蔽性不是太好优化的不够，所以决定再改改。把小窗藏在页面元素之中，图片资源网站应该是最好的选择，就先用千图网来试验一下。

整体方法，就是获取搜索页面的第一个搜索元素，替换成之前小窗里面的东西。

1
2
3
4
5
6
7
var
...
...
theitem = document.querySelector(".flow-item"),
...
...
theitem.replaceChild(videodom, theitem.children[0]);

然后需要把内部的元素宽高重新计算一下，再将之前最外层元素和返回刷新按钮的所有样式都去掉。

1
2
3
4
5
6
7
8
function switchDomSize(){
  vWidth = theitem.offsetWidth - 20;
  vHeight = vWidth * vScale;
  if(videodom.children[0].tagName.toLowerCase() != "ul"){
    videodom.children[0].style.width = vWidth;
    videodom.children[0].style.height = vHeight;
  }
}

再看了之前的文章，发现还缺少一个B站的生成，结合之前在博客添加视频的文章，可以直接把代码拷过来。

1
videodom.innerHTML = '<embed width="' + vWidth + '" height="' + vHeight + '" allownetworking="all" allowscriptaccess="always" src="https://staticlive.douyucdn.cn/common/share/play.swf?room_id=' + liveid + '" quality="high" bgcolor="#000" wmode="window" allowfullscreen="true" allowFullScreenInteractive="true" type="application/x-shockwave-flash">';

然后现在就是还差一个问题，就是在生成播放器的时候，元素的高度会发生变化，可能会溢出。目前想到的就是调用他们页面自己的resize方法，查看源码，发现是使用的瀑布流插件masonry，chrome插件中使用页面的js还是有点麻烦的，不过试了一下，可以直接把jquery和masonry都引入到插件中。

修改manifest.json文件

1
2
3
4
5
6
7
8
9
10
{
  ...
  ...
  "content_scripts": [
    {
      "matches": ["http://www.58pic.com/tupian/*"],
      "js": ["douyu_vedio.user.js", "jquery-3.3.1.slim.min.js", "masonry.pkgd.min.js"]
    }
  ]
}

然后重新修改switchDomSize方法，直接使用页面中一样的方法即可。同时在点击事件和返回事件中都要调用此方法。
1
2
3
4
5
6
7
8
9
10
function switchDomSize(){
  ...
  ...
  setTimeout(function(){
    $(".flow-box").masonry({
      itemSelector: ".flow-item",
      gutterWidth: 1
    })
  }, 380);
}