概要

以下のようにページ本体が右側のサイドバーによって押し縮められているような実装をしたい。

実装方法

実装方法はページのheadタグに以下を追加するだけです。

<style id="chrome-extension-style-right-space">
      html {
        width: calc(100% - 350px) !important;
      }
</style>

追加したあとのhtmlの構成はこんな感じ

<!DOCTYPE html>
<html>
    <head>
        
        ...
        
        <style id="chrome-extension-style-right-space">
              html {
                width: calc(100% - 350px) !important;
              }
        </style>
    </head>
    <body>
        
        ...
        
        <!-- Chrome拡張のサイドバーの要素 -->
        <div id="chrome-extension-content">
        #shadow-root(open)
            ...
        </div>
    </body>
</html>

Chrome拡張のサイドバーでページ幅を縮める方法

概要

実装方法