chrome插件入门 使用chrome插件修改页面属性

前段时间有个变态的需求需要把页面上的read more按钮去掉并且隐藏的内容显示出来，所以开发了这个插件。

不要问我为什么不在服务器上直接修改代码的问题

就是下图的这个read more

插件文件结构：

1. js/jquery.js
2. js/index.js
3. manifest.json

jquery.js文件的内容就不贴出来了，你知道的

js/index.js

/**
 * Created by fuguang on 2017/7/6.
 */

$(function () {
    $("#op_container_text").attr("style","max-height: 100rem;");
    $("#expand").parent().attr("style","display: none");
    $("#expand").remove();
});

manifest.json

{
  "name": "RemoveReadMore",
  "version": "0.9.0",
  "manifest_version":2,
  "description": "remove the read more button",
  "content_scripts": [
    {
      "matches": ["*://*/*"],//目标页面地址
      "js": ["js/jquery.js","js/index.js"]
    }
  ]
}

当然贴一下我目标页面的结构，就知道为什么index.js要这么写了。

目标页面暂且叫做index.html

<main>
    <div id="op_container_text" data-newsid="" data-entryid="6d587343" style="max-height: 822px;">....</div>
    <div class="expand">
  
  

   
   

    
    

     
             <img src="../../static/img/opacity.png">
    
    
   
   
   
   

    
    

     
             <button id="expand">Read more</button>
    
    
   
   
  
  
  
  

   
       </div>
  
  
</main>

Ok,插件代码都完了，

1. 使用chrome打包一下，打开chrome://extensions/ 点击打包扩展程序按钮。
2. 直接用鼠标把生成的crx文件拖动到chrome://extensions/，然后点击添加扩展程序，就可以了