hide csdn ad in chrome

Posted on | Edited on | In

Create manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "CSDN Ad Blocker",
  "version": "1.0",
  "description": "An simple extension to hide the ads from csdn website",
  "manifest_version": 2,
  "icons": {
    "128": "bb.ico"
  },
  "content_scripts": [{
    "js": ["content.js"],
    "matches": ["https://blog.csdn.net/*"]
  }]
}

choose an icon you like like ‘bb.ico’
declare extension function, matches website …

Create content.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let adSelectors = [
  'iframe',
  'aside .csdn-tracking-statistics.mb8.box-shadow',
  'aside .right_box.footer_box.csdn-tracking-statistics',
  '.indexSuperise',
  '#adContent',
  '#reportContent',
  '.recommend-box',
  '.recommend-right',
  '.pulllog-box',
  '#article_content a img'
]

document.querySelectorAll(adSelectors.join(',')).forEach(item => {
  item.style.display = 'none'
})

var readmore = document.getElementById("btn-readmore");
readmore.removeAttribute('data-track-click');
readmore.click();
1
2
3
4
5
6
7
8
9
10
11
# ad frame
# left up one
# left down recruit
# right superise
# right vip
# right report
# recommend box
# recommend right
# botton button bar
# login register bar
# article content ad image

hide target ad dom.
if you like, you can adjust the main DOM.

1
document.getElementsByTagName('main')[0].style.width = '75%'

this line in repository cause aside squeezed underneath the main dom
and i don’t like it, so i delete this line.

Install extension

in chrome open this url chrome://extensions/
open toggle developer mode
clike LOAD UNPACKED, choose project folder.

enjoy :-)

https://github.com/JerryYuanJ/demos/tree/master/02-simple-csdn-ad-blocker
https://blog.csdn.net/qq_25324335/article/details/82595836