小编Ben*_*rey的帖子

我正在尝试在Photoshop模型中复制按钮样式,其上有两个阴影.第一个阴影是内部较亮的盒子阴影(2px),第二个阴影是按钮外部的阴影(5px)本身.

在Photoshop中这很容易 - 内阴影和阴影.在CSS中,我显然可以拥有一个或另一个,但不能同时拥有两个.

如果您在浏览器中尝试下面的代码,您将看到box-shadow覆盖了inset box-shadow.

这是插入框阴影:

box-shadow: inset 0 2px 0px #dcffa6;

这就是我想要的按钮上的阴影:

box-shadow: 0 2px 5px #000;

对于上下文,这是我的完整按钮代码(带渐变和全部):

button {
    outline: none;
    position: relative;
    width: 160px;
    height: 40px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    text-shadow: 0px 1px 3px black; 
    border-radius: 3px;
    background-color: #669900;
    background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900));
    background: -moz-linear-gradient(top, #97cb52, #669900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#97cb52', endColorstr='#669900');
    box-shadow: inset 0 2px 0px #dcffa6;
    box-shadow: 0 2px 5px #000;
    border: 1px solid #222;
    cursor: …

我正在使用chrome.browserAction.setBadgeText为我的扩展程序的浏览器图标添加徽章,该图标显示用户的待办事项列表中未完成的任务数.

在用户零任务的那一刻,我最终得到了这个:

然而,我更喜欢的是当用户没有任务时根本不显示徽章.

这是我的代码:

setBrowserActionBadge: function(allTasks) {
  var task_count;
  task_count = allTasks.filter(function(task) {
    task.isDone === false;
  }).length;

  task_count = task_count.toString();

  if (task_count === 0) {
    task_count = '';
  }

  chrome.browserAction.setBadgeText({
    'text': task_count
  });

  chrome.browserAction.setBadgeBackgroundColor({
    'color': '#333333'
  });

};

每次检查或添加任务时都会运行此方法,因此会实时更新.

什么是理想的东西chrome.browserAction.clearBadge,当任务计数为0时,我可以运行,以删除徽章.

我有一个简单的Chrome扩展程序,它使用chrome.storage.sync来存储任务列表.

控制台中的以下命令将清除扩展的所有同步数据:

chrome.storage.sync.clear()

如果我的用户遇到同步问题,我可以简单地指示他们卸载扩展并再次安装以获得与该命令相同的效果吗？

网站通常会从诸如hello@example.com或 之类的地址发送通知电子邮件no-reply@example.com。当这些出现在 Gmail / Inbox 中时，它们通常有一个名称和一个关联的头像，就像 Zeplin 中的这个：

我知道如果您使用的是 Google Apps，作为管理员，您可以创建一个名为的用户no-reply并设置他们的头像。但这也会占用一个用户槽，每月 5 美元。而且我不确定这种技术是否适用于 Gmail 或 Inbox。

还有其他方法可以为自动电子邮件地址设置头像吗？

该chrome.runtime API有,我可以用它来添加一个侦听上下文菜单的几个事件.目前我正在这样使用chrome.runtime.onStartup:

chrome.runtime.onStartup.addListener(function() {
  chrome.contextMenus.create({
    'title': 'Add: %s',
    'contexts': ['selection']
  });
});

chrome.contextMenus.onClicked.addListener(onClickHandler);

问题是,chrome.runtime.onStartup当用户启动或重新启动Chrome chrome.runtime.onInstalled时,该功能将起作用,并且在首次安装或更新扩展程序或Chrome时可以使用.

如果我这样做onStartup,那么当我的扩展程序或Chrome下次更新时,我的上下文菜单就不会出现.如果我这样做onInstalled,那么在用户重新启动Chrome后,我的上下文菜单将不会保留.

我该如何处理这两种情况？

我正在为一个应用程序构建一个主页，我在靠近网站顶部的一行中有四个“价值主张”块。

我正在使用 flexbox，以便块会在调整网站大小时做出响应，这很有效，但是我想避免在一行中有 3 个块而在第二行中有 1 个块作为孤块的情况，在它包装到 2x2 之前，最后是单列。

这是我的 CSS：

.value-prop {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  .prop {
    padding: 10px 20px;
    flex-basis: 25%;
    text-align: center;

    img {
      height: auto;
      margin: 0 0 10px;
      width: 200px;
    }
  }
}

我试过把它们分成两块，每块两块，但间距开始变得有点时髦。我知道可以这样做，但我希望有一种我不知道的更简单的方法。

我喜欢在Bitbucket Pipelines中为Ruby on Rails/PostgreSQL/Sidekiq项目设置持续部署,但是我很难理解它是如何组合在一起的,特别是如何在Docker镜像中使用postgres .我是Docker和Pipelines的新手.

在我的谷歌搜索中,Docker谈到使用docker-compose创建一个包,所以我有一个Postgres容器和一个Sideqik容器,然后将它们与app容器链接.但我不确定捆绑包和图像之间的区别是什么,以及Bitbucket Pipelines是否支持捆绑包.最终我想在Heroku上设置部署到临时环境,但是现在只rspec spec需要在Pipelines中工作就可以了.

是否存在已经设置了Ruby + PostgreSQL的现有公共映像,我可以使用它？如果没有,我从哪里开始？我当前的Dockerfile如下所示:

FROM postgres:9.4
FROM ruby:2.3.1-onbuild
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs postgresql-client

然后我运行docker build .并docker run -it my-image /bin/bash执行以下命令:

root@a84ad0e7c16b:/usr/src/app# postgres
bash: postgres: command not found
root@a84ad0e7c16b:/usr/src/app# psql 
psql: could not connect to server: No such file or directory
  Is the server running locally and accepting
  connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

我有一个简单的Chrome扩展程序,它使用chrome.storage API在列表中存储任务.每次更新任务列表时,阵列都存储到chrome.storage.sync.

我有两台笔记本电脑设置了Chrome扩展程序.我在两者上都登录了相同的Google帐户.

有时,当我更新第一台笔记本电脑上的任务列表时,第二台笔记本电脑将在几秒钟内反映更新.但其他时候,第二台笔记本电脑很长时间都不会收到更新.这是非常不一致的 - 有时如果我退出Chrome并在第二台机器上重新启动它,更新的列表将会在那里.

我在任何一台笔记本电脑上都没有出现任何控制台错误,并且任务在第一台机器上正确保存 - 它们只是没有转移到第二台笔记本电脑上.

该chrome.storage.sync API有一些限制,我想弄清楚,如果我违反其中之一.最有可能的是:

10 MAX_SUSTAINED_WRITE_OPERATIONS_PER_MINUTE

"每分钟可以执行的最大设置,删除或清除操作数,持续超过10分钟.将导致超出此限制的更新立即失败并设置runtime.lastError."

我读到的方式是,只要连续10分钟每分钟不超过10次操作(总共至少100次),就不会违反限制.如果我违反此限制,我会看到控制台错误或任务无法在本地保存.

通常 - 有没有办法调试Chrome同步问题？它有望成为一个好消息吗？

背景

我有一个带有浏览器操作的 Chrome 扩展程序，可以index.html在新标签页中启动。

我想更新扩展程序以首先index.html在弹出窗口中打开，然后包含一个按钮，用户可以单击以选择性地在新选项卡中打开应用程序。

我不希望这个按钮在它不是弹出窗口时显示（因为它没有意义），这意味着内容脚本需要知道它是否是一个弹出窗口才能显示按钮。

问题

这是一个两部分的问题：

1. Chrome 扩展弹出窗口如何知道它是一个弹出窗口？
2. 如何在呈现弹出窗口之前将该信息传递给内容脚本？

我试过的

我尝试使用chrome.extension.getViewsinbackground.js首先确定弹出窗口是否打开。然后，我向内容脚本发送一条消息，然后显示该按钮。但是我还没有让它工作 -views总是一个空数组，并且内容脚本似乎永远不会收到消息。

以下是我的manifest.json文件的相关部分：

"background": {
  "scripts": ["background.js"]
},

"browser_action": {
  "default_icon": {   
    "19": "img/icon19.png",
    "38": "img/icon38.png"
  },

  "default_title": "Super Simple Tasks",

  "default_popup": "index.html"
}

这是我一直在尝试的内容background.js：

// Get all popups
var views = chrome.extension.getViews({ type: "popup" });

// Send a message if there is a popup
if (views.length > 0){
  chrome.tabs.query({active: true, currentWindow: …

我有一个待办事项列表Chrome 扩展程序，其中所有代码都在内容中。什么都没有background.js——主要是因为我也将这个应用程序部署为一个独立的网站。

单击扩展程序的浏览器操作和弹出窗口渲染之间有 2 到 3 秒的延迟。我相信这是因为 Chrome 在显示弹出窗口之前正在等待大量 JS 运行。

奇怪的是，当我将应用程序作为选项卡打开时，它会立即加载（它不是一个特别繁重的 JS 应用程序！）它只显示大量延迟作为弹出窗口。

在不从根本上改变我的扩展程序的架构的情况下，有没有一种方法可以让我快速获胜以提高弹出窗口的加载性能？我可以推迟什么？

这是我的manifest.json文件：

"background": {
  "page": "index.html"
},

"browser_action": {
  "default_icon": {   
    "19": "img/icon19.png",
    "38": "img/icon38.png"
  },

"default_title": "Super Simple Tasks",

"default_popup": "index.html?popup=true"
}

该应用程序做了一些事情$(document).ready：在主体上设置一个类，将一些东西放入控制台，检查存储类型，以及检查我们是否有互联网连接。

注意：如果您更喜欢 JavaScript，这里是在每次加载时运行的编译后的 JS 代码。除了我在下面包含的内容之外，还有更多内容。

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  checkOnline()

  $new_task_input = $('#new-task')
  $link_input = $('#add-link-input')

  initialize()

initialize 然后设置应用程序：它获取任务数组并检查它是否为空，将事件发送到 Google Analytics，如有必要，从旧版本运行迁移，显示任务，并进行一些 DOM 操作。

initialize = ->

    window.storageType.get DB.db_key, (allTasks) …