小编Gre*_*rog的帖子

我一直在学习创建chrome扩展.我已经尝试过hello world示例,它工作正常.现在我一直在尝试添加自定义代码,并根据我的要求对hello world代码进行一些更改.

我想要创建的是当用户点击地址栏中的图标时,它应该打开地址栏下方的popup.html ,如图所示.截图来自扩展名为raindrop.io

他们正在进行chrome扩展.当我点击图标时,它会在现有网页顶部和地址栏下方打开右侧抽屉,以显示我保存的所有书签.我想达到同样的效果,但我不知道从哪里开始.我听说有一些实验性的侧窗格,但谷歌删除了它.

编辑

我已经采纳了这些建议,并试图实现这一点.现在我被困在两个地方 -

1. 单击地址栏中的图标时如何打开窗口.现在它只是自动打开.我想在用户点击图标时打开它.
2. 我正在做这一切来创建一个扩展的注释,我已经创建了一个笔记扩展,但它在弹出界面工作,但我想在侧边栏界面实现.

这是我的代码 -

A. Chrome扩展中的侧窗口界面

的manifest.json

    {
    "manifest_version": 2,

    "name": "Hello World",
    "description": "This extension to test html injection",
    "version": "1.0",
    "content_scripts": [{
        "run_at": "document_end",
        "matches": [
            "https://*/*",
            "http://*/*"
        ],
        "js": ["js/jquery-1.11.3.js", "js/content-script.js"],
        "css": ["css/custom.css"]
    }],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "permissions": [
        "activeTab",
        "https://ajax.googleapis.com/"
    ]
  }

内容Script.js

var iframe = document.createElement('iframe'); 
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "360px";
iframe.style.position = "fixed";
iframe.style.top = "0px"; …

我一直在尝试创建一个画廊应用程序,其中用户鼠标悬停在div上,它变大但休息保持相同的高度.您可以在此codepen代码段的示例中看到这种情况.

问题:问题是当我将鼠标移到某些div时,它没有正确排列.任何人都可以帮助我使它像所以没有div离开父div并填写父div.

$( '.preview' ).on( 'mouseover', function() {
    $( '.preview' ).removeClass( 'active' );
    $( this ).addClass( 'active' )
}).each( function( i, el ) {
    $( el ).append( '<span>' + i + '</span>' )
});

body {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

.main {
  width: 400px;
  height: 500px;
  background: red;
  font-size: 0;
}

.preview {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid grey;
  transition: width 1s;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  float: left; …