为你的哔哩哔哩PC首页增加「猜你喜欢」模块

Latest Version

Version
1.13
Update
January 12, 2022
Size
19.62KiB
Developer
Category
Users
5,000+
Rating
4.6087 ★
Manifest Version
2
Web Store Status
Languages Support
中文 (简体)
See more
Permissions
Http://www.bilibili.com/*
Https://www.bilibili.com/*
Storage
See more

哔哩哔哩·猜你喜欢 Extension

作为被时代抛弃的PC党,每次刷完自己的关注列表后,面对堆满视频的首页却感觉完全没东西可看,这种时候真的好羡慕手机上的猜你喜欢啊!!!
所以我就问了三哥PC首页啥时候才会有猜你喜欢,三哥说计划是有的,但是PC首页流量也很大需要慢慢来 =3=
既然一时半会不会有官方的猜你喜欢,那我们只能自己动手做一个了!

感谢 @April 帮忙画的以假乱真的小电视图标w

** 关于推荐列表为空时占的面积比较大的问题:只要安装这个扩展后随便点击一个视频,然后刷新页面就有推荐视频了,空白只会存在一小会而已

20191125:更新兼容了B站新版首页,暂时没时间细调样式,所以后边会有挺大的空白,等我考完试我会找点时间处理下的!

关键字:bilibili、B站、哔哩哔哩、猜你喜欢
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "\u54d4\u54e9\u54d4\u54e9\u00b7\u731c\u4f60\u559c\u6b22", "description": "\u4e3a\u4f60\u7684\u54d4\u54e9\u54d4\u54e9PC\u9996\u9875\u589e\u52a0\u300c\u731c\u4f60\u559c\u6b22\u300d\u6a21\u5757", "version": "1.13", "icons": { "16": "icon.png", "48": "icon.png", "128": "icon128.png" }, "browser_action": { "default_icon": "icon.png", "default_title": "\u54d4\u54e9\u54d4\u54e9\u731c\u4f60\u559c\u6b22", "default_popup": "popup.html" }, "permissions": [ "http://www.bilibili.com/*", "https://www.bilibili.com/*", "storage" ], "content_scripts": [{ "matches": [ "http://www.bilibili.com/*", "https://www.bilibili.com/*" ], "js": [ "main.js" ], "run_at": "document_idle" }]}
Read more

How to download and manually install 哔哩哔哩·猜你喜欢 extension for Chrome

Looking for a way to install 哔哩哔哩·猜你喜欢 extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install 哔哩哔哩·猜你喜欢 extensions manually, this article outlines two simple methods to effortlessly install 哔哩哔哩·猜你喜欢 extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download 哔哩哔哩·猜你喜欢 extension and manually install through Drag &Drop

If you ever need to manually install a 哔哩哔哩·猜你喜欢 extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the 哔哩哔哩·猜你喜欢 Extension by clicking the "Download CRX" button on the website.

Look for the 哔哩哔哩·猜你喜欢 extension you wish to install. Go to the website and download the 哔哩哔哩·猜你喜欢 extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for 哔哩哔哩·猜你喜欢 extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the 哔哩哔哩·猜你喜欢 extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download 哔哩哔哩·猜你喜欢 extension for Chrome and install in Developer Mode

This is another method to install 哔哩哔哩·猜你喜欢 extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the 哔哩哔哩·猜你喜欢 extension file

Select and download the 哔哩哔哩·猜你喜欢 extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the 哔哩哔哩·猜你喜欢 extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your 哔哩哔哩·猜你喜欢 extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the 哔哩哔哩·猜你喜欢 extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install 哔哩哔哩·猜你喜欢 extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

為什麼你們就是不能加個空格呢? Extension · Productivity 5,000+ 415 ★ 2.5MiB

icon

Btools Extension · Productivity 5,000+ 58 ★ 557KiB

icon

Dmooji - Live Comments & Danmu(弹幕) on YouTube Extension · Fun 5,000+ 1722 ★ 907KiB

icon

眼不见心不烦(新浪微博) Extension · Social & Communication 5,000+ 1356 ★ 45.56KiB

icon

ACG Helper - Designed for Bilibili Extension · Productivity 5,000+ 3702 ★ 3.51MiB

icon

Extension Manager Extension · Productivity 5,000+ 1029 ★ 562KiB

icon

BewlyBewly Extension · Productivity 5,000+ 332 ★ 1.06MiB

icon

bilibili哔哩哔哩下载助手 Extension · Productivity 5,000+ 12051 ★ 9.63MiB

icon

NooBox Extension · Productivity 5,000+ 237 ★ 2.73MiB

icon

Live Helper Extension · Fun 5,000+ 155 ★ 518KiB

icon

SimpRead - Reader View Extension · Productivity 5,000+ 2100 ★ 1.2MiB

icon

购物党自动比价工具 Extension · Shopping 5,000+ 416 ★ 7.36MiB

icon

RSSHub Radar Extension · Productivity 5,000+ 60 ★ 1.54MiB

icon

京价保 - 京东价保助手 Extension · Shopping 5,000+ 426 ★ 1.01MiB

icon

pakku:哔哩哔哩弹幕过滤器 Extension · Fun 5,000+ 940 ★ 322KiB

icon

Extension for Bilibili Player Extension · Fun 5,000+ 122 ★ 93.14KiB

icon

集装箱 Extension · Productivity 5,000+ 213 ★ 915KiB

icon

v2ex plus Extension · Productivity 5,000+ 102 ★ 64.7KiB

icon

SimpTab - Minimalistic New Tab Extension · Productivity 5,000+ 186 ★ 358KiB

icon

YAAW for Chrome Extension · Accessibility 5,000+ 96 ★ 204KiB

icon

iZhihu Extension · Accessibility 5,000+ 68 ★ 165KiB

icon

划词翻译 Extension · Productivity 5,000+ 1736 ★ 4.73MiB

icon

Saladict - Pop-up Dictionary and Page Translator Extension · Productivity 5,000+ 1656 ★ 3.64MiB

icon

Bilibili Music: Bilibili.com Auxiliary Extension · Fun 5,000+ 21 ★ 305KiB

User reviews

icon

雷托 (ID: 000000a6a2fc7b13) Voted 5 ★ - Updated 10/27/2023 是很不错的插件,可惜停止更新了,新版已经无法适配了,已失效

icon

萌之神唑 (ID: 00000013b95e8c55) Voted 5 ★ - Updated 09/01/2023 B站强制更新新版首页,已经失效了

icon

hp l (ID: 00000031ddc909ae) Voted 5 ★ - Updated 03/17/2022 为什么没用,根本没显示。。。

icon

Autism (ID: 000000b3f1a0a8b3) Voted 5 ★ - Updated 01/29/2022 请问出现这个怎么办 // 插入页面 // 目前看来第一个

是首屏的推荐模块,我们直接插在她下面就可以了 const anchor = document.querySelector('.bili-grid.short-margin.grid-anchor'); if (!anchor) { throw new Error(`${LOG_PREFIX} 无法定位首屏推荐模块
`) } anchor.insertAdjacentElement('afterEnd', node); UI.node = node; resolve(); }); }, // 获取推荐模块的引用 getRecommandNode() { return new Promise(async(resolve) => { // 检查是否有已插入的节点 UI.node = document.querySelector('#_bili_guessyoulike'); if (!UI.node) { // 没有就创建 await UI.insertRecommands(); } resolve(); }); }, renderVideoCard(video) { function toWan(number) { return number > 9999 ? ((number / 10000).toFixed(1) + '万') : number; } function toMin(seconds) { return String(Math.floor(seconds / 60)).padStart(2, '0') + ':' + String(seconds % 60).padStart(2, '0'); } function toHttps(url) { return url.replace('http://', 'https://'); } return videoCardTemplate.replaceAll('!#{bvid}', video.bvid) .replaceAll('!#{duration}', toMin(video.duration)) .replaceAll('!#{title}', video.title) .replaceAll('!#{cover}', toHttps(video.pic)) .replaceAll('!#{view}', toWan(video.stat.view)) .replaceAll('!#{like}', toWan(video.stat.like)) .replaceAll('!#{uid}', video.up.mid) .replaceAll('!#{avatar}', toHttps(video.up.face)) .replaceAll('!#{username}', video.up.name) }, async updateRecommands(videos) { await UI.getRecommandNode(); const node = UI.node; const stage = node.querySelector('.bangumi-activity-body'); if (videos.length) { // 生成视频卡片 const videoCardsHTML = videos.map(video => UI.renderVideoCard(video)).join(''); stage.innerHTML = videoCardsHTML; } else { stage.innerHTML = '

观看记录为空,快去看几个视频吧~

'; } }, // 监听来自页面的更新请求 listen() { window.addEventListener('message', (ev) => { if (ev.data.type && ev.data.type == 'UPDATE_RECOMMANDS') { RECOMMAND.recommand(recommandMax); } }); } } // 在视频页直接点击关联视频并不会刷新页面,而是直接ajax加载改变url,所以我们要监听hashchange // 试了下hashchange事件好像监听不到?不知道为啥,写个dirty check吧 const URLLISTENER = { timer: null, bvid: '', tick() { const bvid = UI.getBVID(); if (bvid !== URLLISTENER.bvid) { DB.logUserViewHistory(bvid); RECOMMAND.get(bvid); URLLISTENER.bvid = bvid; console.log(`${LOG_PREFIX} Logged ${bvid}`); } }, init() { URLLISTENER.timer = setInterval(URLLISTENER.tick, 10000); // 10s检查一次差不多了吧 URLLISTENER.tick(); } } function init() { // 当前是否首页? if (UI.isIndex()) { RECOMMAND.recommand(recommandMax); UI.listen(); } // 当前是否视频播放页? // 如果是视频播放页,则获取当前视频的相关推荐视频 if (UI.isVideo()) { URLLISTENER.init(); } } // 增加了bvid字段,需要清除以前的数据 DB.get('_20200325_clear_data', (cleared) => { if (cleared) { init(); } else { chrome.storage.local.clear(() => { DB.set({ '_20200325_clear_data': true }); init(); }); } });

icon

郁祉峤 (ID: 00000036a02924ba) Voted 5 ★ - Updated 01/18/2022 感谢作者更新,新版首页也是配了,排版布局也不变型了,给点个赞。